立即更改多個CSS屬性

Question

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

現在，如果我有一個元素，並嘗試更改一些CSS屬性，那麼我必須爲每個CSS屬性編寫一行代碼。例如：

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

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

 
div#start:hover { 
 
    cursor: pointer; 
 
    background-color: #A1A1A1; 
 
}

<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>

正如你可以在我的例子見上面，我寫每一個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"); 

}