如何使用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表示法。 所以， backgroundColor和background-color都可以完成工作。
另外，当你用参数调用.css() ，你可以有两个select参数。 它们可以是2个逗号分隔的string，代表CSS属性及其值，也可以是包含一个或多个CSS属性和值的键值对的Javascript对象。
总之，你的代码唯一的错误是缺less一个} 。 该行应为：
$("#myParagraph").css({"backgroundColor":"black","color":"white"});
你不能离开大括号，但是你可以将引号从backgroundColor和color左右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>
