如何在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

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

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

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

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

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

传递一个json对象:

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

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

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

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

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

或者,您也可以使用JavaScript属性名称:

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

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

请试试这个,

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

你也可以使用attrstyle

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

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

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

尝试这个

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

你可以尝试这个

 $("p:first").css("background-color", "#B2E0FF").css("border", "3px solid red"); 
 $("#message").css({"width" : "550px", "height" : "300px", "font-size" : "8pt"}); 

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

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