HTML Document Object Model (DOM) provides us with a series of properties to add and change CSS styles of any selected HTML Element in the webpage using JavaScript.
In this lesson, we will learn about those properties. They are as follows:
Note: Also check out our JavaScript 👉 Add and Delete Elements and 👉 Change or Update Elements lesson.
The JavaScript style.property property ✨
The style.property property helps us to get or set a CSS property of the selected HTML element in the DOM. In more simpler words, it gives us the values of the chosen property of the style attribute of the selected element.
The style.property property returns a CSSStyleDeclaration Object containing the inline CSS styles of the selected HTML element when setting a CSS property whereas when getting a CSS property, it returns that selected property’s value.
Note: The CSSStyleDeclaration Object contains the value of only the inline style attribute of the selected element. It does not return CSS styles provided to the element by any external linked stylesheets (CSS stylesheets linked in the <link> tag) or the styles provided inside the <head> tag for that element.
Syntax: To Get a CSS Property
element.style.property
Syntax: To Set a CSS Property
element.style.property = propertyValue
Returns
- When getting a CSS property, returns the value of that selected property.
- When setting a CSS property, returns a CSSStyleDeclaration Object containing all the inline styles of that selected element.
Example: Get CSS Properties 🔎
<!DOCTYPE html>
<html>
<head>
<title>Style Property</title>
</head>
<body>
<h1 id="h1" style="color: green; border: 2px solid gray">
I Love Bitslord.
</h1>
<script>
const h1 = document.getElementById("h1");
// Getting the value of "color" property from the "style" attribute of "h1" element.
let colorOfH1 = h1.style.color;
// Displaying the value.
console.log(h1.style.color);
// Getting and displaying the value of the "border" property of "h1" element.
console.log(h1.style.border);
</script>
</body>
</html>
Output
Example: Set CSS Properties ✏
<!DOCTYPE html>
<html>
<head>
<title>Setting CSS property</title>
</head>
<body>
<h1 id="h1">I Love Bitslord.</h1>
<script>
const h1 = document.getElementById("h1");
// Setting the value of "color" property to "blue".
h1.style.color = "blue";
// Setting the value of the "border" property.
h1.style.border = "2px solid gray";
// Displays the CSSStyleDeclaration Object containing all possible CSS properties.
console.log(h1.style);
</script>
</body>
</html>
Output
The JavaScript className() property ⚡
The className() property helps us to get or set CSS classes on the given selected element. The class attribute is generally used when we want to apply CSS classes on the given HTML Element.
The className() property returns the value of the class attribute which is in a string format separated by spaces when there is more than one CSS class attached.
Syntax
element.className
Returns
- The value of the class attribute in a string format separated by spaces when there is more than one CSS class attached.
Example: Get CSS classes. 🔎
<!DOCTYPE html>
<html>
<head>
<title>ClassName Property</title>
<style>
.heading {
color: #f7df1e;
}
.text-sans {
font-family: sans-serif;
}
</style>
</head>
<body>
<h1 class="heading text-sans" id="headingElement">I love Javascript</h1>
<script>
const headingElement = document.getElementById("headingElement");
// Displays the value of "class" attribute of the "headingElement".
console.log(headingElement.className);
</script>
</body>
</html>
Output
Example: Set CSS classes. ✏
<!DOCTYPE html>
<html>
<head>
<title>ClassName Property</title>
<style>
.text-sans {
font-family: sans-serif;
}
.heading {
color: #f7df1e;
}
.border {
border: 1px solid black;
}
</style>
</head>
<body>
<h1 id="headingElement">I love Javascript</h1>
<script>
const headingElement = document.getElementById("headingElement");
// Adding the "text-sans" CSS class to the "headingElement".
headingElement.className = "text-sans";
// Adding two new CSS classes called "heading" and "border" to the "headingElement" after 3 seconds.
setTimeout(() => {
headingElement.className = "heading border";
}, 3000);
</script>
</body>
</html>
Output: Before 3 seconds
Output: After 3 seconds ⏲
The JavaScript classList() property 🔥
The classList() property also helps us to get or set CSS classes on the given selected element but provides more methods to manipulate those classes like: add, remove, toggle or get a list of all those classes.
The classList() property returns an object-like list called DOMTokenList. The methods and properties available on the DOMTokenList make it even easier to add, modify or get CSS classes.
Syntax
element.classList
Returns
- An object-like list called DOMTokenList.
Example: Get a list of all CSS classes. 🔎
<!DOCTYPE html>
<html>
<head>
<title>ClassList Property</title>
<style>
.heading {
color: #f7df1e;
}
.text-sans {
font-family: sans-serif;
}
</style>
</head>
<body>
<h1 class="heading text-sans" id="headingElement">I love Javascript</h1>
<script>
const headingElement = document.getElementById("headingElement");
// Returns an object-like list called "DOMTokenList".
const cssClasses = headingElement.classList;
// Here, you can view all the available methods and properties on "DOMTokenList".
console.log(cssClasses);
// Returns the value of the "class" attribute
console.log(cssClasses.value);
// Displays the first and second CSS class attatched to "headingElement"
console.log(cssClasses[0]);
console.log(cssClasses[1]);
</script>
</body>
</html>
Output
Example: Set CSS classes. ✏
<!DOCTYPE html>
<html>
<head>
<title>ClassList Property</title>
<style>
.text-sans {
font-family: sans-serif;
}
.heading {
color: #f7df1e;
}
.border {
border: 1px solid black;
}
</style>
</head>
<body>
<h1 id="headingElement">I love Javascript</h1>
<script>
const headingElement = document.getElementById("headingElement");
// Returns an object-like list called "DOMTokenList".
const cssClasses = headingElement.classList;
// Add one CSS class called "text-sans".
cssClasses.add("text-sans");
// Add two more CSS classes at the same time.
cssClasses.add("heading", "border");
// Display all the available CSS classes on the "headingElement".
console.log(cssClasses.value);
</script>
</body>
</html>
Output
Example: Remove CSS classes. 🗑
<!DOCTYPE html>
<html>
<head>
<title>ClassList Property</title>
<style>
.text-sans {
font-family: sans-serif;
}
.heading {
color: #f7df1e;
}
.border {
border: 1px solid black;
}
</style>
</head>
<body>
<h1 class="text-sans heading border" id="headingElement">
I love Javascript
</h1>
<script>
const headingElement = document.getElementById("headingElement");
// Returns an object-like list called "DOMTokenList".
const cssClasses = headingElement.classList;
// Remove one CSS class called "text-sans".
cssClasses.remove("text-sans");
// Remove two more CSS classes at the same time.
cssClasses.remove("heading", "border");
// Displays nothing as there are no CSS classes remaining in the "headingElement".
console.log(cssClasses.value);
</script>
</body>
</html>
Output
Example: Toggle (Add or Remove) CSS classes. ✂ ➕
<!DOCTYPE html>
<html>
<head>
<title>ClassList Property</title>
<style>
.text-sans {
font-family: sans-serif;
}
.heading {
color: #f7df1e;
}
.border {
border: 1px solid black;
}
</style>
</head>
<body>
<h1 id="headingElement">I love Javascript</h1>
<script>
const headingElement = document.getElementById("headingElement");
// Returns an object-like list called "DOMTokenList".
const cssClasses = headingElement.classList;
// Add three CSS classes: "text-sans", "heading" and "border".
cssClasses.add("text-sans", "heading", "border");
// Call the "toggle" method every 2 seconds which will remove the "border" class if it is attatched, otherwise adds it.
setInterval(() => {
cssClasses.toggle("border");
}, 2000);
</script>
</body>
</html>
Output: Every 2 seconds 🕒
In this way, we can manipulate and change CSS classes using JavaScript in the Document Object Model. 🤯