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表示法时，由于名称中的连字符，它们必需。 / p>

Answer 1

即使您有1个或更多，也最好只使用.addClass()。更易于维护和阅读。

如果您真的想要做多个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's documentation中找到。

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"});

此外，最好使用内置addClass的jQuery来提高项目的可扩展性。

来源：How To: jQuery Add CSS and Remove CSS

Answer 9

试试这个

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

Answer 10

你可以尝试这个

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

Answer 11

试试这个：

$（IDname）的CSS（{ “背景”： “＃000” “颜色”： “＃000” }）

即hello是div中的id。

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

Answer 12

使用变量的最佳方法

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

Answer 13

如果要更改多个CSS属性，则必须使用如下的 object 结构：

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

但是当我们想更改很多样式时，它变得更糟，所以我建议您添加一个类，而不是使用jQuery更改CSS，并添加一个类也更具可读性。

请参见以下示例：

CSS

<style>
    .custom-class{
       font-weight: bold;
       background: #f5f5f5;
       text-align: center;
       font-size: 18px;
       color:red;
    }
</style>

jQuery

$(document).ready(function(){
   $('#message').addclass('custom-class');
});

后一个示例相对于前一个示例的一个优势是，如果您想添加某些元素的onclick，并且想要在第二次单击时删除该css，那么在后一个示例中，您可以使用.toggleClass('custom-class')

在前面的示例中，您必须将所有css设置为之前设置的不同值，这将很复杂，因此使用class选项将是更好的解决方案。

Answer 14

您可以使用

$('selector').css({'width:'16px', 'color': 'green', 'margin': '0'});

最好的方法是使用$（'selector'）。addClass（'custom-class'）和

.custom-class{
width:16px,
color: green;
margin: 0;
}

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

14 个答案: