Dynamically Change CSS Class With JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript CSS | Written & Updated By - Anjali
In this article we will show you the solution of dynamically change css class with javascript, the Cascading Style Sheet properties or CSS are used to add style to the HTML file.
We can also add CSS dynamically to an HTML file by using JavaScript.
In this tutorial, we will see three different methods of JavaScript to achieve that - Style method, className method and classList method
Step By Step Guide On Dynamically Change CSS Class With JavaScript :-
Let us see the step-by-step guide of all the methods to change CSS class dynamically.
Method 1 - Style method
The first method we are going to use is the style method.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> dynamically change CSS class with JavaScript </title> <script> var element ; document.querySelector( " #h1 " ).style.color = " green " ; document.querySelector( " #h1 " ).style.backgroundColor = " white " ; element = document.querySelector( " #h1 " ).style.color ; console.log( element ) ; </script> </head> <body> <h1 id="h1"> TalkersCode </h1> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here. We gave it an id.
- Within the <head> tag we have created the<script> tag to add JavaScript.
- For the JS we first created a variable named element
- We used document.querySelector().style then add style to the element.
- Using console.log() to display.
Method 2 - className
The second method we are going to use is the className method.
<!DOCTYPE html>
<html lang = " en " >
<head>
<meta charset = " UTF-8 " >
<meta http-equiv = " X-UA-Compatible " content = " IE=edge ">
<meta name = " viewport" content = " width=device-width, initial-scale=1.0">
<title> dynamically change CSS class with JavaScript </title>
<script>
var element ;
document.querySelector( " #div1 " ).className = " div " ;
element = document.querySelector( " div1 " ).className ;
console.log( element ) ;
</script>
</head >
<style >
.div {
color : blue ;
background-color : antiquewhite ;
font-size : medium ;
}
</style>
<body>
<div id="div1" >
this is div.
</div >
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively. Also, create a <style> tag, and into the style tag create some class with style.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <div> tag is created and We gave it an id also.
- Within the <head> tag we have created the<script> tag to add JavaScript.
- For the JS we first created a variable named element
- We used document.querySelector().className to add style by adding the class name created into the <style> tag.
- Using console.log() to display.
Method 3 - classList
The last method we’re going to use is the classList method.
<!DOCTYPE html>
<html lang = " en " >
<head>
<meta charset = " UTF-8 " >
<meta http-equiv = " X-UA-Compatible " content = " IE = edge " >
<meta name = " viewport " content = " width=device-width , initial-scale=1.0">
<title> dynamically change CSS class with JavaScript </title>
<script>
let el = Document.querySelector( " #div1 " )
el.classList.add( " class1 ")
el.classList.add( " class2 ")
el.classList.add( " class3 ")
console.log(el) ;
</script>
<style>
.class1 {
color : blue ;
}
.class2{
background-color : antiquewhite ;
}
.class3 {
font-weight : bolder ;
}
</style>
</head>
<body>
<h1> TalkersCode </h1>
<div id = " div1 " >
this is a div
</div>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively. Also, create a <style> tag, and into the style tag create some class with style.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <div> tag is created and We gave it an id also.
- Within the <head> tag we have created the<script> tag to add JavaScript.
- For the JS we first created a variable named el.
- We used document.querySelector().classList.add to add style by adding the class name created into the <style> tag.
- We can also remove style by document.querySelector().classList.remove
- Using console.log() to display.
Conclusion :-
Last here in conclusion, here we can say that with the help of this article we are able to dynamically change CSS property using JavaScript.
I hope this article on dynamically change css class with javascript helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
