Element: className property
The className property of the Element interface gets and sets the value of the class attribute of the specified element.
A string variable representing the class or space-separated classes of the current element.
The name className is used for this property instead of class because of conflicts with the «class» keyword in many languages which are used to manipulate the DOM.
className can also be an instance of SVGAnimatedString if the element is an SVGElement . It is better to get/set the className of an element using Element.getAttribute and Element.setAttribute if you are dealing with SVG elements. However, take into account that Element.getAttribute returns null instead of «» if the element has an empty class attribute.
Note: The class is an HTML Attribute, while the className is a DOM Property.
Method 1: Get the Class Name Using Name Property
- First, a class called “Teacher” is created through an empty body.
- The console.log()method displays the class name by accessing the constructor function.
It is observed that the “name” property is utilized to access the class name “Teacher”.
Method 2: Get the Class Name Using isPrototypeOf() Method
The isPrototypeOf() method finds out if the existence of an object is a part of another object’s prototype chain. It takes input and returns a Boolean output (true or false) based on the user input. The following example is provided here to get the class name with the isPrototypeOf() method.
The description of the code is given below:
- Firstly, a class “Animal” is created, and after that an “obj” object is initialized with a new keyword.
- Furthermore, the “isPrototypeOf()” method is employed to check the existence of an object by passing “obj”.
Method 3: Get the Class Name Using instanceof Property
In this code, the class name “Vehicle” is accessed through the instanceof operator. After that, the console.log() method is utilized to display the return value.https://amdy.su/wp-admin/options-general.php?page=ad-inserter.php#tab-8
The output displays the “true” value in the console window, which validates the accessibility of the class.
About the author
Syed Minhal Abbas
I hold a master’s degree in computer science and work as an academic researcher. I am eager to read about new technologies and share them with the rest of the world.
HTML DOM Element className
The className property sets or returns an element’s class attribute.
Return the className property:
Set the className property:
Value Description class The class name(s) of an element.
Separate multiple classes with spaces, like "test demo".
Type Description String The class, or a space-separated list of classes, of an element
Get the class attribute of the first <div> element (if any):
Get a class attribute with multiple classes:
Overwrite an existing class attribute with a new one:
To add new classes, without overwriting existing values, add a space and the new classes:
if «myDIV» has a «myStyle» class, change the font size:
const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") <
elem.style.fontSize = "30px";
If you scroll 50 pixels from the top of this page, the class «test» is added:
function myFunction() <
if (document.body.scrollTop > 50) <
document.getElementById("myP").className = "test";
> else <
document.getElementById("myP").className = "";
element.className is supported in all browsers:
Chrome Edge Firefox Safari Opera IE Yes Yes Yes Yes Yes Yes
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
One useful thing to be able to know from an object is the name of the class it was created from.
Getting the class name of an object
First let’s start with a class and an object created from it.
Given the object triangle , we can get the class name of it using the constructor property, which returns a reference to the constructor function that created the object, then using the name property to get the name of the class.
The reason this works is you can use the constructor property to get the class of an object, which includes the name, along with other properties.
This is useful because it allows you to get the name of the class that created an object, which can be useful for debugging.
Thanks for reading!
If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!