EN
JavaScript - add multiple CSS class names to one HTML element
3
points
In this article, we would like to show you how to add multiple classes for one element using JavaScript.
Quick solution:
var element = document.querySelector('#element');
element.classList.add('layout', 'border');
or:
var element = document.querySelector('#element');
element.classList.add('layout');
element.classList.add('border');
or:
function addClass(element, classes) {
var tmp = element.className;
if (tmp) {
tmp += ' ';
}
element.className = tmp + classes;
}
// Usage example:
var element = document.querySelector('#element');
addClass(element, 'layout border');
Note: try to avoid last one solution if it is not necessary.
Quick explaination
Always when we use classList.add() method, the classes that already exists are omitted. It is main reasone why that method is recommended. The second one reasone is the solution simplicity.
Practical examples
Example 1:
In this example, we use classList.add() method with multiple parameters to add multiple class names to the element.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.layout {
width: 200px;
height: 100px;
}
.border {
border: 1px solid orange;
}
</style>
</head>
<body>
<div id="element">Some content here ...</div>
<script>
var element = document.querySelector('#element');
element.classList.add('layout', 'border');
</script>
</body>
</html>
Example 2:
In this example, we use classList.add() method multiple times to add multiple class names to the element.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.layout {
width: 200px;
height: 100px;
}
.border {
border: 1px solid orange;
}
</style>
</head>
<body>
<div id="element">Some content here ...</div>
<script>
var element = document.querySelector('#element');
element.classList.add('layout');
element.classList.add('border');
</script>
</body>
</html>
Example 3:
In this example, we use className property to add multiple class names to the element.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.layout {
width: 200px;
height: 100px;
}
.border {
border: 1px solid orange;
}
</style>
</head>
<body>
<div id="element">Some content here ...</div>
<script>
function addClass(element, classes) {
var tmp = element.className;
if (tmp) {
tmp += ' ';
}
element.className = tmp + classes;
}
// Usage example:
var element = document.querySelector('#element');
addClass(element, 'layout border');
</script>
</body>
</html>
See also
References
Alternative titles
- JavaScript - multiple CSS classes for one HTML element
- JavaScript - add multiple CSS class names for one HTML element
- JavaScript - multiple CSS class names for one HTML element
- JavaScript - add multiple CSS classes for one HTML element
- JavaScript - multiple CSS classes to one HTML element
- JavaScript - add multiple CSS classes to one HTML element
- JavaScript - multiple CSS class names to one HTML element