JavaScript Change CSS Class Property
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this article we will show you the solution of JavaScript change CSS class property, the Cascading Style Sheet properties or CSS are used to add style to the HTML file.
We can also add CSS to an HTML file by using JavaScript. In this tutorial, we will see three different methods of JavaScript.
Step By Step Guide On JavaScript Change CSS Class Property :-
Method 1 - Using jQuery:
Here we are going to use a JavaScript library jQuery to add CSS. Here we first have to create an HTML file and then add an external JavaScript file containing CSS class property.
Let us look at the html file first,
<!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 > change CSS property using JavaScript < /title > < /head > < body > < h1 id="heading" > TALKERSCODE.COM < /h1 > < h2 > welcome to talkerscode.com < /h2 > < button id = "button"> Click me! </button> <script src = "index.js"> </script> </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.
- Then add <h2> tag also
- Create a <button> then add id “button” to it.
- Add external javascript file “index.js”
document.querySelector("#button").onClick = function(){
const h1 = document.querySelector("heading");
console.log(h1.style);
h1.style.backgroundColor="yellow";
h1.style.fontFamily = "roboto";
}
Here you can add the CSS property as you see them in the console window.
Method 2 - using document.createElement():
We can change css property using this method also.
//JavaScript Code
var editCSS = document.createElement('style')
editCSS.innerHTML = ".winner{background-color:blue;}"
document.body.appendChild(editCSS);
- document.createElement used to Creates a new element node with the given tag style
- Add CSS property to it
- We can append something to body by calling body.append(editCSS).
Method 3 - using document. getElementById():
It is one of the simplest methods to add CSS property by javascript. Let at look at the HTML file first.
<!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> change CSS property using JavaScript </title>
</head>
<body>
<h1 id="h1"> TALKERSCODE.COM </h1>
<h2 id="h2"> change CSS property using JavaScript </h2>
<script>
document.getElementById("h1").style.color = "purple";
document.getElementById("h2").style.backgroundColor = "yellow";
</script>
</body>
</html>
- Create a HTML file with two heading h1 and h2 with different id
- Addressing document.getElementById() with the id used in h1 and h2 , then add CSS property
- Here we have used color and background color here.
Conclusion :-
At last here in conclusion, here we can say that with the help of this article we are able to change CSS property using JavaScript.
I hope this article on JavaScript change CSS class property helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
