Advanced Search

Class handling functions

/ Published in: JavaScript
Save to your folder(s)
Standard hasClass, addClass, and removeClass functions.
- reworked so that jsLint is happy about them
- removeClass function trims things after removing a class name
- tests help to ensure that all common use-cases are covered

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. function hasClass(el, className) {
  2.     var regEx = new RegExp("(^|\\s)" + className + "(\\s|$)");
  3.     return el.className.match(regEx) !== null;
  4. }
  5.  
  6. function addClass(el, className) {
  7.     if (hasClass(el, className)) {
  8.         return el;
  9.     }
  10.     if (!el.className) {
  11.         el.className = className;
  12.     } else {
  13.         el.className = el.className + " " + className;
  14.     }
  15.     return el;
  16. }
  17.  
  18. function removeClass(el, className) {
  19.     var regEx = new RegExp("(^|\\s)" + className + "(\\s|$)");
  20.     var newClass = el.className.replace(regEx, " ");
  21.     if (hasClass(el, className)) {
  22.         el.className = newClass.replace(/^\s+|\s+$/g, "");
  23.     }
  24.     return el;
  25. }
  26.  
  27. // What follows are a number of tests to ensure that the above functions work as expected.
  28.  
  29. function makeEl(classNames) {
  30.     var el = document.createElement("div");
  31.     el.className = classNames;
  32.     return el;
  33. }
  34. var classes = "apple banana carrot";
  35.  
  36. console.assert(makeEl("").className === "", "should be empty");
  37. console.assert(makeEl(classes).className === classes, "should have classes");
  38.  
  39. console.assert(hasClass(makeEl(""), "apple") === false, "shouldn't have apple");
  40. console.assert(hasClass(makeEl(classes), "apple"), "should have apple");
  41. console.assert(hasClass(makeEl(classes), "banana"), "should have banana");
  42. console.assert(hasClass(makeEl(classes), "carrot"), "should have carrot");
  43. console.assert(hasClass(makeEl(classes), "app") === false, "shouldn't have app");
  44.  
  45. console.assert(addClass(makeEl(""), "apple").className === "apple", "should be apple");
  46. console.assert(addClass(makeEl(classes), "date").className === "apple banana carrot date", "should have date");
  47.  
  48. console.assert(removeClass(makeEl(""), "").className === "", "should be empty");
  49. console.assert(removeClass(makeEl(""), "apple").className === "", "can't remove what isn't there");
  50. console.assert(removeClass(makeEl(classes), "").className === classes, "can't remove nothing");
  51. console.assert(removeClass(makeEl(classes), "app").className === classes, "shouldn't remove what isn't there");
  52. console.assert(removeClass(makeEl(classes), "apple").className === "banana carrot", "shouldn't have apple");
  53. console.assert(removeClass(makeEl(classes), "banana").className === "apple carrot", "shouldn't have banana");
  54. console.assert(removeClass(makeEl(classes), "carrot").className === "apple banana", "shouldn't have carrot");

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.