javascript - 如何使用jQuery更改CSS？(How to change CSS using jQuery?)

Question

I am trying to change the CSS using jQuery:(我正在尝试使用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> 

What am I missing here?(我在这里想念什么？)

  ask by user449914 translate from so

Answer 1

Ignore the people that are suggesting that the property name is the issue.(忽略提示属性名称是问题的人员。)

The jQuery API documentation explicitly states that either notation is acceptable: http://api.jquery.com/css/(jQuery API文档明确声明了两种表示形式均可接受： http : //api.jquery.com/css/)

The actual problem is that you are missing a closing curly brace on this line:(实际的问题是您在此行上缺少右花括号：)

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

Change it to this:(更改为此：)

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

Here's a working demo: http://jsfiddle.net/YPYz8/(这是一个工作示例： 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>