如何在 jQuery 中定义多个 CSS 属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/447197/
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 define multiple CSS attributes in jQuery?
提问by Edward Tanguay
Is there any syntactical way in jQuery to define multiple CSS attributes without stringing everything out to the right like this:
jQuery 中是否有任何语法方式来定义多个 CSS 属性，而无需像这样将所有内容向右串起来：
$("#message").css("width", "550px").css("height", "300px").css("font-size", "8pt");
If you have, say, 20 of these your code will become hard to read, any solutions?
如果您有其中的 20 个，您的代码将变得难以阅读，有什么解决方案吗？
From jQuery API, for example, jQuery understands and returns the correct value for both
例如，从 jQuery API 中，jQuery 理解并返回两者的正确值
.css({ "background-color": "#ffe", "border-left": "5px solid #ccc" })
and
和
.css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }).
Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're requireddue to the hyphen in the name.
请注意，对于 DOM 表示法，属性名称周围的引号是可选的，但对于 CSS 表示法，由于名称中的连字符，它们是必需的。
回答by redsquare
Better to just use .addClass()even if you have 1 or more. More maintainable and readable.
.addClass()即使您有 1 个或多个，也最好仅使用。更具可维护性和可读性。
If you really have the urge to do multiple CSS properties then use the following:
如果你真的有做多个 CSS 属性的冲动，那么使用以下内容：
.css({
'font-size' : '10px',
'width' : '30px',
'height' : '10px'
});
NB!
Any CSS properties with a hyphenneed to be quoted.
I've placed the quotes so no one will need to clarify that, and the code will be 100% functional.
注意！
任何带有连字符的CSS 属性都需要引用。
我已经放置了引号，所以没有人需要澄清这一点，并且代码将是 100% 的功能。
回答by dave mankoff
Pass it as an Object:
将其作为对象传递：
$(....).css({
'property': 'value',
'property': 'value'
});
回答by Jimmy
$('#message').css({ width: 550, height: 300, 'font-size': '8pt' });
回答by Sampson
Using a plain object, you can pair up strings that represent property names with their corresponding values. Changing the background color, and making text bolder, for instance would look like this:
使用普通对象，您可以将表示属性名称的字符串与其对应的值配对。例如，更改背景颜色并使文本更粗，如下所示：
$("#message").css({
"background-color": "#0F0",
"font-weight" : "bolder"
});
Alternatively, you can use the JavaScript property names too:
或者，您也可以使用 JavaScript 属性名称：
$("#message").css({
backgroundColor: "rgb(128, 115, 94)",
fontWeight : "700"
});
More information can be found in jQuery's documentation.
更多信息可以在jQuery 的文档中找到。
回答by Megaloman
please try this,
请试试这个，
$(document).ready(function(){
$('#message').css({"color":"red","font-family":"verdana"});
})
回答by Somnath Kharat
You can also use attralong with style:
您还可以attr与 一起使用style：
$('#message').attr("style", "width:550; height:300; font-size:8px" );
回答by Darko Z
Agree with redsquare however it is worth mentioning that if you have a two word property like text-alignyou would do this:
同意 redsquare 但是值得一提的是，如果你有一个像text-align你这样的两个字的属性：
$("#message").css({ width: '30px', height: '10px', 'text-align': 'center'});
回答by Studio3
$("#message").css({"width" : "550px", "height" : "300px", "font-size" : "8pt"});
Also, it may be better to use jQuery's built in addClassto make your project more scalable.
此外，最好使用内置的 jQueryaddClass来使您的项目更具可扩展性。
回答by Janak Prajapati
Try this
尝试这个
$(element).css({
"propertyName1":"propertyValue1",
"propertyName2":"propertyValue2"
})
回答by Rizo
Script
脚本
$(IDname).css({
"background":"#000",
"color":"#000"
})
Html
html
<div id="hello"></div>
