Javascript 如何使用 jQuery 更改 CSS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3730035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change CSS using jQuery?
提问by user449914
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?
我在这里缺少什么？
回答by Ender
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>回答by Sarfraz
You can do either:
您可以执行以下任一操作：
$("h1").css("background-color", "yellow");
Or:
或者：
$("h1").css({backgroundColor: "yellow"});
回答by Peter Ajtai
To clear things up a little, since some of the answers are providing incorrect information:
澄清一下，因为一些答案提供了不正确的信息：
The jQuery .css()method allows the use of either DOM or CSS notation in many cases. So, both backgroundColorand background-colorwill get the job done.
jQuery .css()方法允许在许多情况下使用 DOM 或 CSS 表示法。所以，无论是backgroundColor和background-color将完成这项工作。
Additionally, when you call .css()with arguments you have two choices as to what the arguments can be. They can either be 2 comma separated strings representing a css property and its value, or it can be a Javascript object containing one or more key value pairs of CSS properties and values.
此外，当您.css()使用参数调用时，您有两种选择可以选择参数。它们可以是表示 css 属性及其值的 2 个逗号分隔的字符串，也可以是包含一个或多个 CSS 属性和值的键值对的 Javascript 对象。
In conclusion the only thing wrong with your code is a missing }. The line should read:
总之，您的代码唯一的错误是缺少}. 该行应为：
$("#myParagraph").css({"backgroundColor":"black","color":"white"});
You cannot leave the curly brackets out, but you may leave the quotes out from around backgroundColorand color. If you use background-coloryou must put quotes around it because of the hyphen.
你不能去掉大括号，但你可以去掉周围backgroundColor和的引号color。如果使用background-color连字符，则必须在其周围加上引号。
In general, it's a good habit to quote your Javascript objects, since problems can arise if you do not quote an existing keyword.
一般来说，引用您的 Javascript 对象是一个好习惯，因为如果您不引用现有的关键字，就会出现问题。
A final note is that about the jQuery .ready()method
最后一点是关于 jQuery .ready()方法
$(handler);
is synonymouswith:
是同义词：
$(document).ready(handler);
as well as with a third not recommended form.
以及第三种不推荐的形式。
This means that $(init)is completely correct, since initis the handler in that instance. So, initwill be fired when the DOM is constructed.
这意味着这$(init)是完全正确的，因为init是该实例中的处理程序。因此，init在构建 DOM 时会被触发。
回答by Sadi
When you are using Multiple css property with jQuery then you must use the curly Brace in starting and in the end. You are missing the ending curly brace.
当您在 jQuery 中使用 Multiple css 属性时，您必须在开始和结束时使用花括号。您缺少结尾的花括号。
function init() {
$("h1").css("backgroundColor", "yellow");
$("#myParagraph").css({"background-color":"black","color":"white"});
$(".bordered").css("border", "1px solid black");
}
You can have a look at this jQuery CSS Selector tutorial.
你可以看看这个jQuery CSS Selector 教程。
回答by Johnny
The .css()method makes it super simple to find and set CSS properties and combined with other methods like .animate(), you can make some cool effects on your site.
该.css()方法使查找和设置 CSS 属性变得非常简单，并且与 .animate() 等其他方法相结合，您可以在您的网站上制作一些很酷的效果。
In its simplest form, the .css()method can set a single CSS property for a particular set of matched elements. You just pass the property and value as strings and the element's CSS properties are changed.
在最简单的形式中，该.css()方法可以为一组特定的匹配元素设置单个 CSS 属性。您只需将属性和值作为字符串传递，元素的 CSS 属性就会更改。
$('.example').css('background-color', 'red');
$('.example').css('background-color', 'red');
This would set the ‘background-color' property to ‘red' for any element that had the class of ‘example'.
对于具有“example”类的任何元素，这会将“background-color”属性设置为“red”。
But you aren't limited to just changing one property at a time. Sure, you could add a bunch of identical jQuery objects, each changing just one property at a time, but this is making several, unnecessary calls to the DOM and is a lot of repeated code.
但您并不仅限于一次只更改一个属性。当然，您可以添加一堆相同的 jQuery 对象，每个对象一次只更改一个属性，但这会导致对 DOM 进行多次不必要的调用，并且会产生大量重复代码。
Instead, you can pass the .css()method a Javascript object that contains the properties and values as key/value pairs. This way, each property will then be set on the jQuery object all at once.
相反，您可以将.css()包含属性和值作为键/值对的 Javascript 对象传递给该方法。这样，每个属性都将一次设置在 jQuery 对象上。
$('.example').css({
'background-color': 'red',
'border' : '1px solid red',
'color' : 'white',
'font-size': '32px',
'text-align' : 'center',
'display' : 'inline-block'
});
This will change all of these CSS properties on the ‘.example' elements.
这将更改 '.example' 元素上的所有这些 CSS 属性。
回答by lowtechsun
Just wanted to add that when using numbers for values with the css method you have to add them outside the apostrophe and then add the CSS unitin apostrophes.
只是想补充一点，当使用 css 方法为值使用数字时，您必须将它们添加到撇号之外，然后在撇号中添加 CSS单元。
$('.block').css('width',50 + '%');
or
或者
var $block = $('.block')
$block.css({ 'width': 50 + '%', 'height': 4 + 'em', 'background': '#FFDAB9' });
回答by Nikit Barochiya
<!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>
回答by Daooji katara
$(".radioValue").css({"background-color":"-webkit-linear-gradient(#e9e9e9,rgba(255, 255, 255, 0.43137254901960786),#e9e9e9)","color":"#454545", "padding": "8px"});
$(".radioValue").css({"background-color":"-webkit-linear-gradient(#e9e9e9,rgba(255, 255, 255, 0.43137254901960786),#e9e9e9)","color":"# 454545", "padding": "8px"});
回答by Daooji katara
$(function(){
$('.bordered').css({
"border":"1px solid #EFEFEF",
"margin":"0 auto",
"width":"80%"
});
$('h1').css({
"margin-left":"10px"
});
$('#myParagraph').css({
"margin-left":"10px",
"font-family":"sans-serif"
});
});<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>回答by galexy
wrong code:$("#myParagraph").css({"backgroundColor":"black","color":"white");
错误代码：$("#myParagraph").css({"backgroundColor":"black","color":"white");
its missing "}"after white"
它失踪 "}"后white"
change it to this
改成这个
$("#myParagraph").css({"background-color":"black","color":"white"});
