How do you do jQuery’s hasClass
with plain ol’ JavaScript? For example,
<body class="foo thatClass bar">
What’s the JavaScript way to ask if <body>
has thatClass
?
Simply use classList.contains()
:
if (document.body.classList.contains('thatClass')) {
// do some stuff
}
Other uses of classList
:
document.body.classList.add('thisClass');
// $('body').addClass('thisClass');
document.body.classList.remove('thatClass');
// $('body').removeClass('thatClass');
document.body.classList.toggle('anotherClass');
// $('body').toggleClass('anotherClass');
Browser Support:
.classList
as a string, but it will not recognise the more modern methods such as .classList.contains()
You can check whether element.className
matches /\bthatClass\b/
.
\b
matches a word break.
Or, you can use jQuery's own implementation:
var className = " " + selector + " ";
if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" thatClass ") > -1 )
To answer your more general question, you can look at jQuery's source code on github or at the source for hasClass
specifically in this source viewer.
rclass
actually is ;))
Commented
Feb 23, 2011 at 0:15
/[\t\r\n\f]/g
. Also it's good to mention that /\bclass\b/
can fail for classnames with -
minus sign (other than that it works good) , that's why jQuery's implementation is better and more reliable. For example: /\bbig\b/.test('big-text')
returns true instead of expected false.
The most effective one liner that
thisClass
on an element that has class="thisClass-suffix"
.function hasClass( target, className ) {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}
// 1. Use if for see that classes:
if (document.querySelector(".section-name").classList.contains("section-filter")) {
alert("Grid section");
// code...
}
<!--2. Add a class in the .html:-->
<div class="section-name section-filter">...</div>
The attribute that stores the classes in use is className
.
So you can say:
if (document.body.className.match(/\bmyclass\b/)) {
....
}
If you want a location that shows you how jQuery does everything, I would suggest:
match
attribute comes handy again! Does really jQuery does something more than is possible in JavaScript?! If not, jQuery is just an unnecessary weight of shorthands.
Commented
Jan 4, 2015 at 21:35
myclass-something
, as \b
matches hyphen.
Commented
Jun 4, 2015 at 22:20
Instead of $(element).hasClass('example')
in jQuery, you can use element.matches('.example')
in plain JavaScript:
if (element.matches('.example')) {
// Element has example class ...
}
hasClass = (el, name) => el.matches('.'+name) ? 1 : 0
Commented
Oct 21, 2020 at 23:04
hasClass function:
HTMLElement.prototype.hasClass = function(cls) {
var i;
var classes = this.className.split(" ");
for(i = 0; i < classes.length; i++) {
if(classes[i] == cls) {
return true;
}
}
return false;
};
addClass function:
HTMLElement.prototype.addClass = function(add) {
if (!this.hasClass(add)){
this.className = (this.className + " " + add).trim();
}
};
removeClass function:
HTMLElement.prototype.removeClass = function(remove) {
var newClassName = "";
var i;
var classes = this.className.replace(/\s{2,}/g, ' ').split(" ");
for(i = 0; i < classes.length; i++) {
if(classes[i] !== remove) {
newClassName += classes[i] + " ";
}
}
this.className = newClassName.trim();
};
I use a simple/minimal solution, one line, cross browser, and works with legacy browsers as well:
/\bmyClass/.test(document.body.className) // notice the \b command for whole word 'myClass'
This method is great because does not require polyfills and if you use them for classList
it's much better in terms of performance. At least for me.
Update: I made a tiny polyfill that's an all round solution I use now:
function hasClass(element,testClass){
if ('classList' in element) { return element.classList.contains(testClass);
} else { return new Regexp(testClass).exec(element.className); } // this is better
//} else { return el.className.indexOf(testClass) != -1; } // this is faster but requires indexOf() polyfill
return false;
}
For the other class manipulation, see the complete file here.
!/myClass/.test(document.body.className)
notice the !
symbol.
thisIsmyClassHere
.
a good solution for this is to work with classList and contains.
i did it like this:
... for ( var i = 0; i < container.length; i++ ) {
if ( container[i].classList.contains('half_width') ) { ...
So you need your element and check the list of the classes. If one of the classes is the same as the one you search for it will return true if not it will return false!
This 'hasClass' function works in IE8+, FireFox and Chrome:
hasClass = function(el, cls) {
var regexp = new RegExp('(\\s|^)' + cls + '(\\s|$)'),
target = (typeof el.className === 'undefined') ? window.event.srcElement : el;
return target.className.match(regexp);
}
[Updated Jan'2021] A better way:
hasClass = (el, cls) => {
[...el.classList].includes(cls); //cls without dot
};
[...el.classList].contains(cls);
for the 2021 update, right?
Use something like:
Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');
myHTMLSelector.classList.indexOf('the-class')
? Don't you also want >=0
at the end?
[].indexOf
if classList
has a contains
method?
myHTMLSelector.classList.indexOf('the-class')
returns the error that myHTMLSelector.classList.indexOf is not a function
because myHTMLSelector.classList
is not an array. But I guess when calling it using Array.prototype
some conversion happens. This may support older browser, though contains
has very good support.
if (document.body.className.split(/\s+/).indexOf("thatClass") !== -1) {
// has "thatClass"
}
Well all of the above answers are pretty good but here is a small simple function I whipped up. It works pretty well.
function hasClass(el, cn){
var classes = el.classList;
for(var j = 0; j < classes.length; j++){
if(classes[j] == cn){
return true;
}
}
}
classList
has a contains
method?
What do you think about this approach?
<body class="thatClass anotherClass"> </body>
var bodyClasses = document.querySelector('body').className;
var myClass = new RegExp("thatClass");
var trueOrFalse = myClass.test( bodyClasses );
class="nothatClassIsnt"
?
class
property (which in case of multiple classes will have multiple class names in random order separated by a space) and check whether your class name is in it. Not terribly difficult, but still terribly inconvenient if not for learning purposes :)