web-dev-qa-db-fra.com

Changer les propriétés CSS au clic

J'essaie de changer le CSS d'un élément en cliquant sur un autre élément. J'ai beaucoup cherché mais rien ne fonctionne parfaitement. Actuellement, j'utilise le code ci-dessous, mais cela ne fonctionne pas. Quelqu'un peut-il me dire ce que j'ai manqué?

<div id="foo">hello world!</div>
<img src="zoom.png" onclick="myFunction()" />

function myFunction() {
    document.getElementById('foo').style.cssText = 'background-color: red; color: white; font-size: 44px';
}
javascriptjquerycssjquery-uionclick
27
mobi001

Tout d'abord, en utilisant on* attributs pour ajouter des gestionnaires d’événements est un moyen très dépassé d’atteindre ce que vous voulez. Comme vous avez tagué votre question avec jQuery, voici une implémentation de jQuery:

<div id="foo">hello world!</div>
<img src="zoom.png" id="image" />

$('#image').click(function() {
    $('#foo').css({
        'background-color': 'red',
        'color': 'white',
        'font-size': '44px'
    });
});

Une méthode plus efficace consiste à mettre ces styles dans une classe, puis à ajouter cette classe onclick, comme ceci:

$('#image').click(function() {
  $('#foo').addClass('myClass');
});
.myClass {
  background-color: red;
  color: white;
  font-size: 44px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="foo">hello world!</div>
<img src="https://i.imgur.com/9zbkKVz.png?1" id="image" />
26
Rory McCrossan

Essaye ça:

CSS 

.style1{
    background-color:red;
    color:white;
    font-size:44px;
}

HTML 

<div id="foo">hello world!</div>
<img src="zoom.png" onclick="myFunction()" />

Javascript

function myFunction()
{
    document.getElementById('foo').setAttribute("class", "style1");
}
15
ATOzTOA
    <script>
        function change_css(){
            document.getElementById('result').style.cssText = 'padding:20px; background-color:#b2b2ff; color:#0c0800; border:1px solid #0c0800; font-size:22px;';
        }
    </script>

</head>

<body>
    <center>
        <div id="error"></div>
        <center>
            <div id="result"><h2> Javascript Example On click Change Css style</h2></div>
            <button onclick="change_css();">Check</button><br />
        </center>
    </center>
</body>
6
Kirandeep Singh

Dans votre code, vous n'utilisez pas jquery. Si vous voulez l'utiliser, vous avez besoin de quelque chose comme ...

$('#foo').css({'background-color' : 'red', 'color' : 'white', 'font-size' : '44px'});

http://api.jquery.com/css/

Autrement, si vous n'utilisez pas jquery, vous devez le faire ...

document.getElementById('foo').style = 'background-color: red; color: white; font-size: 44px';
1
Elwi

Avec jQuery, vous pouvez le faire comme:

$('img').click(function(){
    $('#foo').css('background-color', 'red').css('color', 'white');
});

cela s'applique à toutes les balises img pour lesquelles vous devez définir un attribut id comme image, puis:

$('#image').click(function(){
    $('#foo').css('background-color', 'red').css('color', 'white');
});
1
Mustafa Shujaie

Ce code semble bien fonctionner (voir this jsfiddle ). Votre javascript est-il défini avant votre corps? Lorsque le navigateur lit onclick="myFunction()", il doit savoir ce que myFunction est.

0
rmhartog
<div id="foo">hello world!</div>
<img src="zoom.png" id="click_me" />

JS

$('#click_me').click(function(){
  $('#foo').css({
    'background-color':'red',
    'color':'white',
    'font-size':'44px'
  });
});
0
Matei Mihai

Essaye ça:

$('#foo').css({backgroundColor:'red', color:'white',fontSize:'44px'});
0
Barry Kaye