Je souhaite modifier la couleur du texte d'un élément lorsque je clique sur un bouton à l'aide de jQuery. Ce code ne fonctionne pas, aidez-moi!

$(document).ready(function() {
  $("p").click(function() {
    $(this).hide();
  });
  $("button").click(function() {
    $("#colorChange").style.color = "blue";
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="colorChange">I should(?) change color when you click mr. button</p>
<button>clickme</button>
0
Kevin Lutz 20 nov. 2018 à 20:47

4 réponses

Meilleure réponse

Essayez d'utiliser $("#colorChange").css("color", "blue") au lieu de $("#colorChange").style.color = "blue".

Pour plus d'informations, visitez: https://api.jquery.com/css

0
Mrigank 20 nov. 2018 à 17:52

J'espère que cette aide

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
    $("button").click(function(){
       $("#colorChange").css("color","blue"); 
    });
});
</script>
</head>
<body>

<p id="colorChange">I should(?) change color when you click mr. button</p>
<button>clickme</button>

</body>
</html>
1
New Developer 20 nov. 2018 à 17:51

Veuillez essayer ceci,

$("button").click(function(){
     $("#colorChange").css("color","blue"); 
});

Celui-ci fonctionne également très bien,

$("button").click(function(){
     $("#colorChange")[0].style.color= 'blue'; 
});
0
Wayne Phipps 20 nov. 2018 à 19:33

Le problème est cette ligne:

$("#colorChange").style.color = "blue";

Ça devrait ressembler à ça:

$("#colorChange")[0].style.color = "blue";

En effet, l'objet renvoyé par $("#colorChange") est un jQuery Object. La propriété de style que vous souhaitez modifier est membre d'un élément DOM, qui peut être récupéré à partir de l'objet jQuery avec un index de tableau ou la méthode get().

0
Romen 20 nov. 2018 à 17:58