如何在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" })

and

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

注意，在DOM表示法中，属性名周围的引号是可选的，但在CSS表示法中，由于名称中的连字符，它们是必须的。

当前回答

最好使用. addclass()和. removeclass()，即使你有1个或多个样式要更改。它更易于维护和阅读。

如果你真的有冲动做多个CSS属性，那么使用下面的:

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

NB ! 任何带有连字符的CSS属性都需要加引号。我已经放置了引号，所以没有人需要澄清这一点，代码将是100%的功能。

其他回答

使用普通对象，可以将表示属性名的字符串与其对应的值配对。改变背景颜色，并使文本粗体，例如，看起来像这样:

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

或者，你也可以使用JavaScript属性名:

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

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

试试这个

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

同意redsquare，但值得一提的是，如果你有一个两个字的属性，如文本对齐，你会这样做:

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

脚本

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

Html

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

将其作为对象传递:

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

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

推荐文章