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

在JQuery中是否有任何语法方式来定义多个CSS属性，而不需要像下面这样将所有的东西都串联起来：

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

如果你有20个这样的代码将变得难以阅读，任何解决scheme？

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

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

和

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

请注意，使用DOM表示法，属性名称周围的引号是可选的，但是由于名称中的连字符，所以需要CSS符号。 – zanetu S

Answer 1

更好的是只要使用.addClass，即使你有1个或更多。 更易于维护和阅读。

如果你真的有做多CSS的道具的冲动，然后使用

注意任何带有连字符的css道具都需要引用。

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

我已经放置了引号，所以没有人需要澄清，代码将是100％的function。

Answer 2

传递一个json对象：

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

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

Answer 3

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

Answer 4

使用普通对象，可以将表示属性名称的string与相应的值配对。 例如，改变背景颜色，使文字变大，看起来像这样：

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

或者，您也可以使用JavaScript属性名称：

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

更多的信息可以在jQuery的文档中find。

Answer 5

请试试这个，

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

Answer 6

你也可以使用attr和style ：

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

Answer 7

同意redsquare，但值得一提的是，如果你有一个像text-align两个字的属性，你会这样做：

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

Answer 8

尝试这个

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

Answer 9

你可以尝试这个

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

Answer 10

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

另外，最好使用jQuery内置的addClass来使你的项目更具可扩展性。

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