var element = document.querySelector('.element'); // Methods for working with CSS classes via className property var toggleClassName = function(element, className) { element.classList.toggle(className); }; var getNumberOfClassNames = function(element) { return element.classList.length; } // Get element for showing of list of CSS class names var elementClasses = document.querySelector('.element-classes'); var showClassNames = function(element, panel) { panel.innerHTML = element.classList; }; // Get element for showing number of CSS class names var elementClassesNumber = document.querySelector('.element-classes-number'); var showElementClassesNumber = function(element, panel) { panel.innerHTML = getNumberOfClassNames(element); }; // Render updated information var renderInformation = function() { showClassNames(element, elementClasses); showElementClassesNumber(element, elementClassesNumber); }; renderInformation(); // Event listeners // Listen to change of checkbox "Toggle Class name 'active'" var inputSwitcher = document.querySelector('.switcher'); inputSwitcher.addEventListener('change', function() { toggleClassName(element, 'active'); renderInformation(); });
<div class="element"> Element </div> <div>CSS classes: <span class="element-classes"></span></div> <div>Number of CSS classes: <span class="element-classes-number"></span></div> <label> Toggle Class name 'active' <input type="checkbox" class="switcher"> </label>
body { font: normal 0.8rem/2 Helvetica, sans-serif; } .active { color: red; } label { color: blue; display: block; }