This post will discuss how to define multiple CSS attributes using JavaScript and jQuery.

1. Using JavaScript

In JavaScript, you can target the style attribute of an element to apply multiple styles in a single statement. This can be easily done using the Object.assign() method, which can merge the specified styles with the existing styles in the style attribute.

JS


HTML



Edit in JSFiddle

 
Another plausible way is to use the setAttribute() method for setting the value of style attribute on the specified element. This has the advantage that you can apply multiple styles for an element in a single declaration, but it risks overriding the existing styles already applied to the style attribute.

JS


HTML



Edit in JSFiddle

 
You can also use the setProperty() method or the style property to set CSS properties on an element, but these have the major disadvantage that multiple CSS properties have to be individually set one at a time.

2. Using jQuery

With jQuery, you can use the .css() method for setting multiple CSS properties on an element. You can specify the property name and its value as separate parameters to the .css() method.

JS


HTML



Edit in JSFiddle

 
To define multiple CSS attributes in a single statement, you can pass a single object of key-value pairs to the .css() method, as shown below:

JS


HTML



Edit in JSFiddle

That’s all about setting multiple CSS properties using JavaScript and jQuery.