JavaScipt for manipulating with CSS class names

by alekskorovin

HTML

<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>

CSS

body {
    font: normal 0.8rem/2 Helvetica, sans-serif;
}
.active {
    color: red;
}
label {
    color: blue;
    display: block;   
}

JavaScript

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();
});