JavaScript Add Class To Element
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
In this article we will show you the solution of JavaScript add class to element, by using the class attribute, some CSS functions can be applied to elements with corresponding class names. An element can be classified in JavaScript, as we explained in this article.
The JavaScript language supports a few different approaches to adding a class to an element. The .className or .add() methods can be used to add a class name to an element.
An element's class name is set by the .className property. The class attribute of an element can be returned by this property.
HTML elements can be given a class without their existing classes being replaced using this property.
It is recommended to insert a space before writing the new class name if an element already has a class name and a new class is being added to the same element. In this case, the new class name will overwrite the existing one.
DOM (Document Object Model) is used to manipulate documents (HTML documents). This article explains how to set and access the class name of DOM elements.
It is important to understand that HTML elements are objects in the DOM.
The .className property sets element class names. By using this property, a new class may be added to the existing class of an HTML element.
There should be a space between each class, such as "class1 and class2".
Step By Step Guide On JavaScript Add Class To Element :-
<!DOCTYPE html>
<html>
<head><center>
<style>
.mystyle {
width: 180%;
padding: 90px;
background-color: pink;
color: black;
font-size: 90px;
box-sizing: border-box;
}
</style>
</head>
<body>
<p>TalkersCode add class to element</p>
<button onclick="myFunction()">Click</button>
<script>
function myFunction() {
var element = document.getElementById("myELE");
element.classList.add("element");
}
</script>
</body>
</html>
- This command tells the browser which version of HTML we are using. HTML documents begin with HTML tags.
- A project's heading can be explained using the <head> tag.
- It is used when an external style sheet has a full URL or a path relative to the current page and is referenced with the Step-by-step tag.
- Then stylesheet and head close using </stylesheet> </head>
- Then we create paragraph using <p> tag.
- To add up and down arrows, we use an ng-class directive in conjunction with the onclick directive.
- The script tag explains the source code we used for the javascript google API to run and the file we used that or the code.
- After that </script></body></html> and code should be executed after closing all tags.
Conclusion :-
We just discussed how to add classes to elements. These properties allow you to add single or multiple classes to an element.
You can also add a class when the element is hovered by using the on mouseover event.
I hope this article on JavaScript add class to element helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
