In my previous article, we looked at different ways to set CSS styles to an element using vanilla JavaScript. In this article, you'll learn about another interesting thing: adding multiple CSS styles at once to an element with JavaScript.

Adding Multiple Inline Styles

The DOM style property is the simplest way to set and get CSS styles from an element in JavaScript.

Usually, when you want to add multiple CSS properties to an element, you have to set them individually as shown below:

const btn = document.querySelector('.btn');

// set inline CSS styles
btn.style.width = '150px';
btn.style.height = '40px';
btn.style.color = 'blue';

However, this approach is not very flexible. If you decide to make any modifications in the future, you have to update the code at more than one location.

One way to solve this issue is by using the cssText attribute provided by the style property as shown below:

btn.style.cssText = 'width: 150px; height: 40px; color: blue';

The above example code should work perfectly. The only drawback, however, is that it overwrites all other inline styles applied to the element.

Another way to apply multiple CSS styles right away is by using the Object.assign() function:

const btn = document.querySelector('.btn');

// create styles object
const styles = {
    width: '150px',
    height: '40px',
    color: 'white',
    backgroundColor: 'black'
};

// apply styles to the button
Object.assign(btn.style, styles);

The above code is more readable and maintainable. Also Object.assign() doesn't overwrite all existing inline styles. Instead, it will only update those properties that match the keys in the styles object.

Adding Multiple Global Styles

I already discussed three different methods to add multiple global styles in the previous article; <style> element, CSSOM's insertRule(), and Constructable Stylesheets.

The simple way is to just create a new <style> element, add your CSS properties using innerHTML, and append it to the DOM:

// create style element
const style = document.createElement('style');

// add CSS styles
style.innerHTML = `
    .btn {
        color: white;
        background-color: black;
        width: 150px;
        height: 40px;
    }
`;

// append the style to the DOM in <head> section
document.head.appendChild(style);

Alternatively, you can also declare all CSS styles as a class in a CSS file, like below:

.btn {
    color: white;
    background-color: black;
    width: 150px;
    height: 40px;
}

And then, simply add the class to the element using JavaScript:

const btn = document.querySelector('.btn');

// add CSS class
btn.classList.add('btn');

Take a look at this guide to learn more about setting CSS styles using vanilla JavaScript.

The purpose of these tutorials is not to discourage the use of CSS classes. Rather, it is just to learn how to manipulate CSS styles using JavaScript. You should always use CSS classes whenever possible. However, it is good to know these tricks while working on projects where you don't have access to CSS files.

✌️ Like this article? Follow @attacomsian on Twitter. You can also follow me on LinkedIn and DEV. Subscribe to RSS Feed.

👋 If you enjoy reading my articles and want to support me to continue creating free tutorials, Buy me a coffee (cost $5) .

Need help to launch a new product? I am available for contract work. Hire me to accomplish your business goals with engineering and design.