如何使用jQuery更改CSS？

javascript jquery css

2022-08-30 02:19:47

我正在尝试使用jQuery更改CSS：

$(init);
    
function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({"backgroundColor":"black","color":"white");
    $(".bordered").css("border", "1px solid black");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
    <h1>Header</h1>
    <p id="myParagraph">This is some paragraph text</p>
</div>

我在这里错过了什么？

答案 1

忽略那些建议属性名称是问题的人。jQuery API 文档明确指出，任一表示法都是可以接受的：http://api.jquery.com/css/

实际问题是您在以下行上缺少一个右大括号：

$("#myParagraph").css({"backgroundColor":"black","color":"white");

将其更改为：

$("#myParagraph").css({"backgroundColor": "black", "color": "white"});

这是一个工作演示：http://jsfiddle.net/YPYz8/

$(init);
    
function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({ "backgroundColor": "black", "color": "white" });
    $(".bordered").css("border", "1px solid black");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
    <h1>Header</h1>
    <p id="myParagraph">This is some paragraph text</p>
</div>

答案 2

您可以执行以下任一操作：

$("h1").css("background-color", "yellow");

艺术

$("h1").css({backgroundColor: "yellow"});