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


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.