Now we learn about How add class in HTML using JavaScript.In this we also give multiple class to HTML.class represent the CSS and give the style to content.
There are two types of common method to add class in HTML using JavaScript. 1). ClassName(); 2). Classlist.add();
Now Understand this method with Example….
Understand class list.add() method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add class name to an element in JavaScript</title>
</head>
<body>
<style>
.B{
border: solid 2px black;
background-color: rgb(255, 235, 205);
}
.text-dark{
color: brown;
}
</style>
<div class="B" id="myElement">
Hello...!
<h3 id="first">Description about CdeSpeedy</h3>
<h5>Our office is located at Mradighi, Rejinagar, Murshidabad, West Bengal.
<br>
CodeSpeedy started as a coding solution blogging platform in the year 2016 to help computer programmers, web developers and software developers.<br>Our blog posts contain articles and tutorials on Python, JavaScript, Swift, PHP, C++, CSS, WordPress, and much more</h5>
</div>
<script>
console.log('Welcome...!');
var element = document.getElementById("first");
// Add the class to the element
element.classList.add("text-dark");
</script>
</body>
</html>
Output of without class add:-
In this Output only .B class apply but dark-text is not apply on output.
Output of adding class through JavaScript :-
In this Output Apply class through JavaScript . select HTML element through getElementById Method ,selected tag is h3 and apply the class .text-dark on It and change the color oh h3 tag color
Understand ClassName() Method
Now example is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add class name to an element in JavaScript</title>
</head>
<body>
<style>
.B{
border: solid 2px black;
background-color: rgb(255, 235, 205);
}
.text-dark{
color: brown;
}
.C{
color: rgb(8, 0, 255);
}
</style>
<div class="B" id="myElement" >
Hello...!
<h3 id="first">Description about CdeSpeedy</h3>
<h5>Our office is located at Mradighi, Rejinagar, Murshidabad, West Bengal.
<br>
CodeSpeedy started as a coding solution blogging platform in the year 2016 to help computer programmers, web developers and software developers.<br>Our blog posts contain articles and tutorials on Python, JavaScript, Swift, PHP, C++, CSS, WordPress, and much more</h5>
</div>
<script>
console.log('Welcome...!');
var v = document.getElementById("myElement");
v.className += " C";
console.log('v')
</script>
</body>
</html>
now here apply css class .c on whole DIV tag That’s in .c class color apply on Text .
Output :-
now .c class is apply on DIV