Is it possible to change multiple CSS attributes of an element with just one line of code?
Currently, if I want to alter various CSS attributes of an element, I have to write separate lines of code for each attribute. For instance:
$("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>In the example above, you can see that I am using a separate line for each CSS attribute. Is there a way to achieve this in a more efficient manner with a single command? For example, something like:
$("p#message").css(
"background-color": "red",
"color": "white",
"padding": "5px",
"width": "120px",
"text-align": "center"
);