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

Question

在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表示法.

Answer 1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Answer 9

试试这个

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

Answer 10

脚本

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

HTML

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

Answer 11

你可以试试看

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

Answer 12

最佳使用变量的方法

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