如何使用jQuery更改CSS?

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

我在这里错过了什么?

忽略那些暗示产权名称是问题的人。 jQuery API明确指出:或者符号是可以接受的: http : //api.jquery.com/css/

实际的问题是,你在这一行上错过了一个大括号:

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

将其更改为:

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

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

你可以做:

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

要么:

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

为了澄清一些事情,因为一些答案提供了不正确的信息:


在许多情况下,jQuery .css()方法允许使用DOM或CSS表示法。 所以, backgroundColorbackground-color都可以完成工作。

另外,当你用参数调用.css() ,你可以有两个select参数。 它们可以是2个逗号分隔的string,代表CSS属性及其值,也可以是包含一个或多个CSS属性和值的键值对的Javascript对象。

总之,你的代码唯一的错误是缺less一个} 。 该行应为:

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

你不能离开大括号,但是你可以将引号从backgroundColorcolor左右backgroundColor 。 如果你使用background-color你必须在其周围加上引号,因为连字符。

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


最后要说明的是关于jQuery .ready()方法

 $(handler); 

同义词

 $(document).ready(handler); 

以及第三个不推荐的forms。

这意味着$(init)是完全正确的,因为init是该实例中的处理程序。 所以,当构buildDOM时, init将被触发。

当你在jQuery中使用多个css属性时,你必须在开始和结束时使用花括号。 你错过了大括号。

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

你可以看看这个jQuery CSS Selector教程 。

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

它的缺失"}" white"之后white"

改变它到这个

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

只是想补充一点,用css方法为数值使用数字时,必须将它们添加到撇号外,然后在撇号中添加CSS 单元

 $('.block').css('width',50 + '%'); 

要么

 var $block = $('.block') $block.css({'width':50 + '%', 'height':4 + 'em', 'background':'#FFDAB9'); 
 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $( document ).ready(function() { $('h1').css('color','#3498db'); }); </script> <style> .wrapper{ height:450px; background:#ededed; text-align:center } </style> </head> <body> <div class="wrapper"> <h1>Title</h1> </div> </body> </html>