Welcome to WebmasterWorld Guest from 3.93.74.227

Forum Moderators: open

Message Too Old, No Replies

Backwards compatibility for "classList.remove()"

     
4:00 am on Feb 11, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


I wasn't sure whether to put this in the JavaScript board or CSS, so my apologies to the mods if I guess wrong.

I found this nifty little bit of code:


document.getElementById('whatever').classList.remove(class1, class2);
document.getElementById('whatever').classList.add(class3, class4);


This would remove class1 and class2 from #whatever, and then add class3 and class4. Nifty! I could replace about 20 lines of JS code with 2 lines.

Except that remove() is only compatible with IE10+ :-(

For now, can you guys suggest a way to make classList backwards compatible for older browsers?
6:37 pm on Feb 11, 2016 (gmt 0)

Junior Member

10+ Year Member

joined:June 24, 2004
posts:147
votes: 1


You can get the value of document.getElementById('whatever').className then use string functions to remove the classes to delete and add the new classes. Then set document.getElementById('whatever').className to the new string value.

Or, do a web search for "polyfill classList" or "shim classList" for ways to add the classList method for older browsers.
5:15 pm on Feb 12, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


classList has only partial support for IE10 and IE11 (and no support for previous versions). [caniuse.com...]

Here is a less concise approach:

// get the classList as an array of strings
var classList = document.getElementById("whatever").className.split(" "),
// removeList is the list of classes to remove
removeList = ['class1', 'class5'],
// addList is the list of classes to add
addList = ['class3', 'class3'];

// filter the classList, removing the items indicated in the removeList
classList = classList.filter(function (className) {
return removeList.indexOf(className) < 0;
});

// add the classes indicated in the addList (if they are not already in the list)
addList.forEach(function (className) {
if (classList.indexOf(className) < 0) {
classList.push(className);
}
});

// assign the new classList back to the DOM element
document.getElementById("whatever").className = classList.join();
10:39 pm on Feb 14, 2016 (gmt 0)

New User

joined:Feb 14, 2016
posts:18
votes: 0


You could use jQuery to do this [w3schools.com...]
12:31 am on Feb 15, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


That's a good one, oligalma! Am I correct in understanding that if I use jQuery then I won't have to worry about backwards compatibility?
1:01 am on Feb 15, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


But if this is the only thing you're going to use jQuery for, it's not really worth loading that library just for that. jQuery is great for DOM interactions, though, so if you have other DOM stuff to do then it may be worth it. Note, with jQuery you would do this:

$('#whatever').removeClass('class1 class2').addClass('class3 class4');
1:03 am on Feb 15, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


And here is jQuery's browser support:
[jquery.com...]
1:12 am on Feb 15, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


But if this is the only thing you're going to use jQuery for, it's not really worth loading that library just for that.


Thanks for the link! In my case, I was already loading jQuery for mobile functions, so I've been playing around with my code and using it in other areas, too. I did NOT realize that 2.x was only compliant with IE9+, though, so I might have to make some modifications.
3:45 am on Feb 15, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


Obviously it depends on your requirements. But I wouldn't bother with IE < 9.