Menu
How can I check in JavaScript if a DOM element contains a class?
I tried the following code, but for some reason it doesn't work...
if (document.getElementById('element').class == "class_one") { //code... } 
263
jQuery hasClass() Method The hasClass() method checks if any of the selected elements have a specified class name. If ANY of the selected elements has the specified class name, this method will return "true".
JavaScript classList is a DOM property of JavaScript that allows for styling the CSS (Cascading Style Sheet) classes of an element. JavaScript classList is a read-only property that returns the names of the CSS classes.
To check if an element contains specific text: Use the textContent property on the element to get the text content of the element and its descendants. Use the includes() method to check if the specific text is contained in the element. If it is, the includes() method returns true , otherwise false is returned.
A DOMTokenList is a parsed representation of a space-separated string of tokens, such as the className property of a Element. A DOMTokenList is, as its name implies, a list—it is an array-like object with a length property and you can index it to retrieve the individual tokens.
How do you check if a particular DOM element you have the reference of, has a class? Use the contains method provided by the classList object, which is: Technically, classList is an object that satisfies the DOMTokenList interface, which means it implements its methods and properties. You can see its details on the DOMTokenList MDN page.
Check if an Element Contains a Class in JavaScript Check If an Element contains a Class To check if an element contains a class, you use the contains () method of the classList property of the element: element.classList.contains (className);
The Function getElementsByClassName () is used to find the element in the DOM using its class name. An example to the class name value is ClassExample in element <a class="ClassExample"></a>. It will return one or more elements if any element is found or null if the element does not exist.
Similar to that we use the getElementById () function to find the element using its Id, we also have many other functions that perform the same operation by with deffrernt criteria like getElementsByClassName (), getElementsByName () and getElementsByTagName ().
To get the whole value of the class atribute, use .className
From MDC:
className gets and sets the value of the class attribute of the specified element.
Many years ago, when this question was first answered, .className was the only real solution in pure JavaScript. Since 2013, all browsers support .classList interface.
JavaScript:
if(document.getElementById('element').classList.contains("class_one")) { //code... } You can also do fun things with classList, like .toggle(), .add() and .remove().
MDN documentation.
Backwards compatible code:
if(document.getElementById('element').className.split(" ").indexOf("class_one") >= 0) { //code... } The property you need is className, not class. Also, an element can have many classes, so if you want to test if it has a particular class you need to do something like the following:
function hasClass(el, clss) { return el.className && new RegExp("(^|\\s)" + clss + "(\\s|$)").test(el.className); } var element = document.getElementById('element'); if ( hasClass(element, "class_one") ) { // Do stuff here } UPDATE
Modern browsers (pretty much everything major except IE <= 9) support a classList property, as mentioned in @Dropped.on.Caprica's answer. It therefore makes sense to use this where available. Here's some example code that detects whether classList is supported by the browser and falls back to the regex-based code otherwise:
var hasClass = (typeof document.documentElement.classList == "undefined") ? function(el, clss) { return el.className && new RegExp("(^|\\s)" + clss + "(\\s|$)").test(el.className); } : function(el, clss) { return el.classList.contains(clss); }; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
