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

【问题标题】：How to define multiple CSS attributes in jQuery?如何在 jQuery 中定义多个 CSS 属性？
【发布时间】：2010-10-01 14:58:33
【问题描述】：

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

和

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

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

【问题讨论】：

标签： jquery css

【解决方案1】：

最好只使用.addClass() 和.removeClass()，即使您要更改一种或多种样式。它更易于维护和阅读。

如果你真的有做多个 CSS 属性的冲动，那么使用以下方法：

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

注意！
任何带有 连字符 的 CSS 属性都需要被引用。
我已经加了引号，所以没有人需要澄清这一点，代码将 100% 正常运行。

【讨论】：

为什么要提出甚至争论这种非标准的语法！只需添加带有'-'的样式，即font-size，它就会失败。如果是关于证明限制，那么$('div').css({ width : 300, height: 40 }); 也有效。
@Jonas - 抱歉你在说什么
如果 CSS 属性有破折号（即文本溢出），那么您需要在属性周围加上引号。我认为这就是 rlb.usa 和 Jonas 所说的。
@redsquare 您是否介意更改答案以提及如果属性中包含“-”则需要用引号括起来的事实？这是 google 上“定义多个 css 属性 jQuery”的第一次点击，任何搜索它的人都可能会因为这个缺失的信息而感到不便。我碰巧是。
@redsquare 请考虑将以下内容添加到您的答案中。来自jQuery API：For example, jQuery understands and returns the correct value for both .css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) and .css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }). Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name.

【解决方案2】：

将其作为对象传递：

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

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

【讨论】：

Javascript 对象，不是 JSON。

【解决方案3】：

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

【讨论】：

要让它工作，你必须改变一些语法： $('#message').css({ width : '550px', height : '300px', 'font-size' : '8pt' });
erm，感谢所有从不阅读 jquery 文档的路过投票者？数值会自动转换为像素值 kthx。
是的，这里有什么问题？ width: 550 完全有效。
我认为您也可以使用不带引号的fontSize...不过我的问题是...您如何设置height 和width，让我们说...相同的值....是.css({ { width, height} : 300 })？
@alexgray 没有 direct 方法可以做到这一点，但您可以将它们分别设置为相同的变量：var x = 100; $el.css({width: x, height: x});

【解决方案4】：

使用普通对象，您可以将表示属性名称的字符串与其对应的值配对。例如，更改背景颜色并使文本加粗如下所示：

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

或者，您也可以使用 JavaScript 属性名称：

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

更多信息可以在jQuery's documentation找到。

【讨论】：

【解决方案5】：

请试试这个，

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

【讨论】：

【解决方案6】：

您还可以将attr 与style 一起使用：

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

【讨论】：

【解决方案7】：

同意 redsquare 但是值得一提的是，如果您有像 text-align 这样的两个词的属性，您会这样做：

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

【讨论】：

【解决方案8】：

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

此外，使用 jQuery 内置的 addClass 可能会更好，以使您的项目更具可扩展性。

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

【讨论】：

【解决方案9】：

试试这个

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

【讨论】：

【解决方案10】：

最好的方法是使用变量。

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

【讨论】：

【解决方案11】：

脚本

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

HTML

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

【讨论】：

【解决方案12】：

你可以试试这个

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

【讨论】：

这不是一个好方法，伙计。最好发送用户 json 类型

【解决方案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');
});

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

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

【讨论】：

【解决方案14】：

你可以使用

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

最好的方法是使用 $('selector').addClass('custom-class') 和

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

【讨论】：