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

在jQuery中是否有任何语法方法来定义多个CSS属性,而不是将所有内容串起来,如下所示:

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

如果您有20个,那么您的代码将难以阅读,任何解决方案？

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

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

和

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

请注意,使用DOM表示法时,属性名称周围的引号是可选的,但由于名称中的连字符,因此需要使用CSS表示法.

1> redsquare..：

---

.addClass()即使您有1个或更多,也可以更好地使用.更易于维护和阅读.

如果你真的有做多个CSS属性的冲动,那么使用以下内容:

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

NB!
任何带连字符的 CSS属性都需要引用.
我已经放置了引号,因此没有人需要澄清这一点,代码将100%正常运行.

---

这实际上是不正确的 - 属性需要在它们周围引用以及值.见Dave Mankoff的回答.

---

如果CSS属性有一个短划线字符(即文本溢出),那么你需要在属性周围加上引号.这就是我认为rlb.usa和Jonas正在谈论的内容.

---

@ rlb.usa实际上它不是不正确的,上面的工作http://jsfiddle.net/ERkXP/.谢谢你的downvote!

---

为什么在地球上提出甚至争论这种非标准语法!只需添加带有' - '即``font-size`的样式,它就会失败.如果它是关于证明限制,那么是`$('div').css({width:300,height:40});`也有效.

---

@redsquare请考虑在答案中添加以下内容.来自[jQuery API](http://api.jquery.com/css/):`例如,jQuery理解并返回.css({"background-color":"#ffe","border"的正确值-left":"5px solid #ccc"})和.css({backgroundColor:"#if",borderLeft:"5px solid #ccc"}).请注意,使用DOM表示法时,属性名称周围的引号是可选的,但由于名称中的连字符,因此需要使用CSS表示法.

---

@redsquare你会介意改变答案,提到如果属性中有" - ",属性需要用引号括起来吗？这是谷歌第一次"定义多个css属性jQuery",任何搜索它的人都有可能因这些缺失的信息而感到不便.我碰巧是.

2> dave mankoff..：

---

传递一个json对象:

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

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

---

Javascript对象,而不是JSON.

3> Jimmy..：

---

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

---

嗯,感谢所有从未阅读过jquery文档的偷车爱好者？数值自动转换为像素值kthx.

---

这是什么问题？`width:550`完全有效.

---

@alexgray没有_direct_方法来执行此操作,但您可以将它们设置为相同的变量:`var x = 100; $ el.css({width:x,height:x});`

---

要使它工作,你必须改变它的一些语法:$('#message').css({width:'550px',height:'300px','font-size':'8pt'});

4> Sampson..：

---

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

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

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

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

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

5> 小智..：

---

请试试这个,

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

6> Somnath Khar..：

---

您还可以使用attr随style:

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

7> Darko Z..：

---

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

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

8> 小智..：

---

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

此外,最好使用内置的jQuery addClass来使您的项目更具可伸缩性.

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

9> 小智..：

---

试试这个

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

10> Rizo..：

---

脚本

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

HTML

11> 小智..：

---

你可以试试看

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

12> 小智..：

---

最佳使用变量的方法

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