Question

我想知道是否可以用一行更改元素的多个CSS属性？

现在，如果我有一个元素并尝试更改一些CSS属性，那么我必须为每个css属性编写一行代码。例如：

＆＃13;

$("div#start").click(function(){
    $("p#message").css("background-color", "red");
    $("p#message").css("color", "white");
    $("p#message").css("padding", "5px");
    $("p#message").css("width", "120px");
    $("p#message").css("text-align", "center");
});

＆＃13;

div#start {
    background-color: #D8D8D8;
    border: 1px solid black;
    width: 50px;
    text-align: center;
}

div#start:hover {
    cursor: pointer;
    background-color: #A1A1A1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="message">Hi Folks</p>
<div id="start">Change CSS</div>

＆＃13;

正如您在上面的示例中所看到的，我为每个CSS属性写了一行。用一个命令可以实现这个目的吗？例如：

$("p#message").css(
    "background-color": "red",
    "color": "white",
    "padding": "5px",
    "width": "120px",
    "text-align": "center"
);

Answer 1

将对象传递给css()。代码缺少{和}。

$("p#message").css({
    "background-color": "red",
    "color": "white",
    "padding": "5px",
    "width": "120px",
    "text-align": "center"
});

由于样式已修复，我建议制作一个CSS类并添加该类。

$("p#message").addClass('myClass');

CSS：

.myClass {
    background: red;
    color: white;
    padding: 5px;
    width: 120px;
    text-align: center
}

Answer 2

使用object as the argument for setting multiple CSS properties。

$("p#message").css({
    "background-color":"red",
    "color":"white",
    "padding":"5px",
    "width":"120px",
    "text-align":"center"
});

Answer 3

你可以像这样写一行：

$("p#message").css("background-color","red").css("color","white").css("padding","5px").css("width","120px").css("text-align","center");

}

一次更改多个CSS属性

3 个答案: