如何在jQuery中定义多个CSS属性？

jQuery是否有任何语法方法来定义多个CSS属性，而无需像这样将所有内容都放在右边：

$("#message").css("width", "550px").css("height", "300px").css("font-size", "8pt");

如果您有20条这样的代码，那么您将很难阅读，有什么解决方案吗？

例如，通过jQuery API，jQuery可以理解并返回两者的正确值

.css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) 

和

.css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }).

请注意，对于DOM表示法，属性名称周围的引号是可选的，但对于CSS表示法，由于名称中的连字符，因此必须使用引号。

更好地使用 .addClass()即使您有1个或更多，也。更具可维护性和可读性。

如果您确实想做多个CSS属性，请使用以下命令：

.css({
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
});

注意！
任何带连字符的 CSS属性都必须加引号。
我已将引号引起来，所以没有人需要澄清这一点，并且代码将具有100％的功能。

将其作为对象传递：

$(....).css({
    'property': 'value', 
    'property': 'value'
});

http://docs.jquery.com/CSS/css#properties

$('#message').css({ width: 550, height: 300, 'font-size': '8pt' });

使用普通对象，可以将代表属性名称的字符串与它们的相应值配对。例如，更改背景颜色并使文本加粗，如下所示：

$("#message").css({
    "background-color": "#0F0", 
    "font-weight"     : "bolder"
});

另外，您也可以使用JavaScript属性名称：

$("#message").css({
    backgroundColor: "rgb(128, 115, 94)",
    fontWeight     : "700"
});

可以在jQuery文档中找到更多信息。

请尝试一下

$(document).ready(function(){
    $('#message').css({"color":"red","font-family":"verdana"});
})

您还可以将attr与一起使用style：

$('#message').attr("style", "width:550; height:300; font-size:8px" );

同意redsquare，但是值得一提的是，如果您有两个单词的属性，text-align可以这样做：

$("#message").css({ width: '30px', height: '10px', 'text-align': 'center'});

$("#message").css({"width" : "550px", "height" : "300px", "font-size" : "8pt"});

另外，最好使用内置的jQuery addClass使您的项目更具可伸缩性。

来源：如何：jQuery添加CSS并删除CSS

尝试这个

$(element).css({
    "propertyName1":"propertyValue1",
    "propertyName2":"propertyValue2"
})

脚本

 $(IDname).css({
    "background":"#000",
    "color":"#000"
})

HTML

<div id="hello"></div>

你可以试试看

$("p:first").css("background-color", "#B2E0FF").css("border", "3px solid red");

最佳使用变量的方法

var style1 = {
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
};
$("#message").css(style1);

如果要更改多个CSS属性，则必须使用以下对象结构：

$(document).ready(function(){
   $('#message').css({
                   "background-color": "#0F0",
                   "color":"red",
                   "font-family":"verdana"
                });
});

但是，当我们想更改很多样式时，情况变得更糟，因此我建议您添加一个类，而不是使用jQuery更改CSS，并且添加一个类也更具可读性。

参见以下示例：

的CSS

<style>
    .custom-class{
       font-weight: bold;
       background: #f5f5f5;
       text-align: center;
       font-size: 18px;
       color:red;
    }
</style>

jQuery的

$(document).ready(function(){
   $('#message').addclass('custom-class');
});

后一个示例相对于前一个示例的一个优势是，如果您想添加某些css onclick并想在第二次单击时删除该css，则在后一个示例中，您可以使用.toggleClass('custom-class')

在前面的示例中，您必须将所有css设置为之前设置的不同值，这将很复杂，因此使用class选项将是更好的解决方案。

您可以使用

$('selector').css({'width:'16px', 'color': 'green', 'margin': '0'});

最好的方法是使用$（'selector'）。addClass（'custom-class'）和

.custom-class{
width:16px,
color: green;
margin: 0;
}