Skip to content

Instantly share code, notes, and snippets.

@abacaj
Last active November 16, 2015 16:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save abacaj/75a04299f9a30be8d19a to your computer and use it in GitHub Desktop.
Save abacaj/75a04299f9a30be8d19a to your computer and use it in GitHub Desktop.
High performance utility for manipulating DOM classes.
var testDiv = document.querySelector('.test-div');
function filterSpaces(strArray) {
return strArray.filter(function(str) {
return /\S/.test(str);
});
}
function addClass(elem, className) {
var classes = filterSpaces(elem.className.split(' '));
if (className.constructor === Array) {
var len = className.length;
var i = 0;
while (len--) {
console.log(i);
classes.push(className[i]);
i++;
}
} else {
classes.push(className);
}
elem.className = classes.join(' ');
return elem;
}
function hasClass(elem, className) {
var classes = filterSpaces(elem.className.split(' '));
return classes.indexOf(className);
}
function toggleClass(elem, className) {
var classes = filterSpaces(elem.className.split(' '));
return (hasClass(elem, className) !== -1) ? removeClass(elem, className) : addClass(elem, className);
}
function removeClass(elem, className) {
var classes = filterSpaces(elem.className.split(' '));
var index = classes.indexOf(className);
if (index !== -1) {
classes.splice(index, 1);
}
elem.className = classes.join(' ');
return elem;
}
var testForClass = hasClass(testDiv, 'class-one');
console.log("test for hasClass: " + testForClass);
var testForAddClass = addClass(testDiv, 'class');
console.log("test for addClass: " + testForAddClass.className);
var testForMultipleAddClass = addClass(testDiv, ['class-added', 'class-added-two']);
console.log("test for multiple addClass: " + testForMultipleAddClass.className);
var testForRemoveClass = removeClass(testDiv, 'class-one');
console.log("test for removeClass: " + testForRemoveClass.className);
var testForToggleClass = toggleClass(testDiv, 'class-added');
console.log("test for toggleClass: " + testForToggleClass.className);
@abacaj
Copy link
Author

abacaj commented Nov 16, 2015

example here: http://jsbin.com/xijona/edit?html,js,output

inspect the element with chrome inspector when making changes to see classes being manipulated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment