如何使用jQuery更改CSS？

Question

我正在尝试使用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>

我在这里错过了什么？

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

Answer 2

你可以这样做:

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

要么:

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

Answer 3

要澄清一点,因为一些答案提供的信息不正确:

在许多情况下,jQuery .css()方法允许使用DOM或CSS表示法.所以,无论是backgroundColor和background-color将完成这项工作.

此外,当您.css()使用参数调用时,您可以选择两个参数.它们可以是2个逗号分隔的字符串,表示css属性及其值,也可以是包含一个或多个CSS属性和值的键值对的Javascript对象.

总而言之,您的代码唯一的问题是缺失}.该行应为:

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

你不能离开大括号,但是你可以离开了引号各地backgroundColor和color.如果你使用,background-color你必须在它周围加上引号,因为连字符.

一般来说,引用Javascript对象是一个好习惯,因为如果不引用现有关键字就会出现问题.

最后一点是关于jQuery .ready()方法

$(handler);

是同义词:

$(document).ready(handler);

以及第三种不推荐的形式.

这意味着$(init)完全正确,因为init该实例中的处理程序.因此,init在构造DOM时将被触发.

Answer 4

当您在jQuery中使用Multiple css属性时,必须在开始和结束时使用大括号.你错过了结束的大括号.

function init() {
 $("h1").css("backgroundColor", "yellow");

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

 $(".bordered").css("border", "1px solid black");
}

你可以看一下这个jQuery CSS Selector教程.

Answer 5

该.css()方法使查找和设置 CSS 属性变得非常简单，并与 .animate() 等其他方法相结合，您可以在您的网站上制作一些很酷的效果。

在最简单的形式中，该.css()方法可以为一组特定的匹配元素设置单个 CSS 属性。您只需将属性和值作为字符串传递，元素的 CSS 属性就会更改。

$('.example').css('background-color', 'red');

对于具有“example”类的任何元素，这会将“background-color”属性设置为“red”。

但您并不仅限于一次只更改一个属性。当然，您可以添加一堆相同的 jQuery 对象，每个对象一次只更改一个属性，但这会导致对 DOM 进行多次不必要的调用，并且会产生大量重复代码。

相反，您可以将.css()包含属性和值作为键/值对的 Javascript 对象传递给该方法。这样，每个属性都将一次设置在 jQuery 对象上。

$('.example').css({
    'background-color': 'red',
    'border' : '1px solid red',
    'color' : 'white',
    'font-size': '32px',
    'text-align' : 'center',
    'display' : 'inline-block'
});

这将更改 '.example' 元素上的所有这些 CSS 属性。

Answer 6

 If you have one css:

   $("p").css("background-color": "pink");

If you have more than one css: 

  $("p").css({"background-color": "pink", "font-size": "200%"});

Or you can use:

var style ="background-color:red;";
$("p").attr("style", style);