I’m looking for a fast and secure way to add and remove classes from an html element without jQuery.
It also should be working in early IE (IE8 and up).
Advertisement
Answer
The following 3 functions work in browsers which don’t support classList
:
JavaScript
x
26
26
1
function hasClass(el, className)
2
{
3
if (el.classList)
4
return el.classList.contains(className);
5
return !!el.className.match(new RegExp('(\s|^)' + className + '(\s|$)'));
6
}
7
8
function addClass(el, className)
9
{
10
if (el.classList)
11
el.classList.add(className)
12
else if (!hasClass(el, className))
13
el.className += " " + className;
14
}
15
16
function removeClass(el, className)
17
{
18
if (el.classList)
19
el.classList.remove(className)
20
else if (hasClass(el, className))
21
{
22
var reg = new RegExp('(\s|^)' + className + '(\s|$)');
23
el.className = el.className.replace(reg, ' ');
24
}
25
}
26
https://jaketrent.com/post/addremove-classes-raw-javascript/