如何使用jQuery更改CSS？

本文介绍了如何使用jQuery更改CSS？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用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明确声明可以接受任何表示法：

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"});

这是一个有效的演示：

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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！