published: 09 Aug 2022
2 min read
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 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 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')
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.
Are we missing something? Help us improve this article. Reach out to us.
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 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 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')
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.
Are you looking for other code tips?
JS Nooby
Javascript connoisseur
