Question

当我使用jQuery单击按钮时，我想更改元素的文本颜色。该代码不起作用，请帮忙！

$(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>

Answer 1

希望获得帮助

<!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>

Answer 2

尝试使用$("#colorChange").css("color", "blue")代替$("#colorChange").style.color = "blue"。

有关更多信息，请访问：https://api.jquery.com/css

Answer 3

问题是这一行：

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

它应该像这样：

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

这是因为从$("#colorChange")返回的对象是jQuery Object。您希望更改的样式属性是DOM Element的成员，可以使用数组索引或get()方法从jQuery Object中检索它。

Answer 4

请尝试一下

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

这也可以，

$("button").click(function(){
     $("#colorChange")[0].style.color= 'blue'; 
});

尝试在.click（）函数中更改另一个元素的属性

4 个答案: