How to add multiple CSS styles using JavaScript

In a 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 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 HTML 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 need 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 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')

Read 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 me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

You might also like...

Digital Ocean

The simplest cloud platform for developers & teams. Start with a $200 free credit.

Buy me a coffee ☕

If you enjoy reading my articles and want to help me out paying bills, please consider buying me a coffee ($5) or two ($10). I will be highly grateful to you ✌️

Enter the number of coffees below:

✨ Learn to build modern web applications using JavaScript and Spring Boot

I started this blog as a place to share everything I have learned in the last decade. I write about modern JavaScript, Node.js, Spring Boot, core Java, RESTful APIs, and all things web development.

The newsletter is sent every week and includes early access to clear, concise, and easy-to-follow tutorials, and other stuff I think you'd enjoy! No spam ever, unsubscribe at any time.