Element: className property
The className property of the Element interface gets and sets the value of the class attribute of the specified element.
Value
A string variable representing the class or space-separated classes of the current element.
Examples
Notes
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.
How to Get Class Name in JavaScript
JavaScript supports classes that encapsulate methods to manipulate data. Therefore, it is important to get/access the class name in a programming task. Getting the name of the class is possible through a name property of constructor. Moreover, the isPrototypeof() method and instanceof operators are employed to get the class name in JavaScript. These methods are useful for debugging messages.
In this guide, you will learn how to get the class name in JavaScript. The content of this blog is as follows:
Method 1: Get the Class Name Using Name Property
The name property integrates with the object constructor that returns the class name. Therefore, a method is adapted with the name property for getting the class name in JavaScript. It is useful in complex programming tasks to repeatedly utilize the name of a class. The code explains the working of the name property to get the class name:
Code
-
- First, a class called “Teacher” is created through an empty body.
- After that, the “obj.constructor” is employed to get the class name with the “name” property in JavaScript.
- The console.log()method displays the class name by accessing the constructor function.
Output
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.
Code
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”.
Output
The output returns a “true” value that validates the access to the class “Animal” in JavaScript.Method 3: Get the Class Name Using instanceof Property
The instanceof property provides a facility to get the class name in JavaScript. Generally, it evaluates the type of object during run time. To find the class name, you can write the class name after the instanceof operator. It returns a Boolean output (true or false value) that validates either you got the class name or not. The following example code makes use of the instanceof operator in JavaScript:
Code
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
Output
The output displays the “true” value in the console window, which validates the accessibility of the class.Conclusion
JavaScript provides the name property, isPrototypeOf() method, and instanceof operators to get the class name. These methods evaluate the existence of objects and return a Boolean output (true or false values) that validates whether you got the class name or not. These methods are useful for debugging messages. All the latest browsers support these methods. In this blog, you have learned to retrieve the class name with different examples in JavaScript.
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.
See Also:
Syntax
Return the className property:
Set the className property:
Property Values
Value Description class The class name(s) of an element.
Separate multiple classes with spaces, like "test demo".Return Value
Type Description String The class, or a space-separated list of classes, of an element More Examples
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 = "";
>
>Related Pages
Browser Support
element.className is supported in all browsers:
Chrome Edge Firefox Safari Opera IE Yes Yes Yes Yes Yes Yes 
COLOR PICKER
Report Error
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.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
How to get the Class name of an Object in JavaScript
JavaScript supports object-oriented programming, which means that you can create classes and objects, and use them to store data.
One useful thing to be able to know from an object is the name of the class it was created from.
In this post, we’ll learn how you can get the class name of an object in JavaScript.
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.
Because most things in JavaScript are objects, they will therefore have a valid constructor property.
Conclusion
In this post, we’ll learn how you can get the class name of an object in JavaScript by using the constructor property.
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!