如何使用jQuery更改CSS？ [英] How to change CSS using jQuery?

问题描述

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

I am trying to change the CSS using jQuery:

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

我在这里缺少什么？

推荐答案

忽略那些暗示属性名称是问题。 jQuery API明确声明可以接受任何表示法： http://api.jquery.com/css/

Ignore the people that are suggesting that the property name is the issue. The jQuery API explicitly states that either notation is acceptable: http://api.jquery.com/css/

实际问题是你在这一行上缺少一个近大括号：

The actual problem is that you are missing a close curly brace on this line:

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

将其更改为：

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

这是一个有效的演示： http://jsfiddle.net/YPYz8/

Here's a working demo: 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>

这篇关于如何使用jQuery更改CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！