Javascript: classes van element

Een html element kan meerdere css classes hebben, welke dan door middel van een spatie worden gescheiden:

<span class="class_een class_twee">..</span>

Bovenstaande span element heeft dus als class “class_een” en “class_twee”.

Om deze classes nu in javascript op te vragen en/of te manipuleren kan je het attribuut class opvragen of de className van het element. Echter levert dat een string met alle class namen spatie gescheiden. Om op een eenvoudige wijze een array van classes op te vragen of aan te passen, heb ik tweetal (zeer kleine) eenvoudige functies.

Functies

getClassList()
@param – element – geselecteerd html element
@return – array – lijst van alle individuele class namen

function getClassList(element) {
	if (!element.className.length) {
		return [];
	}
	
	return element.className.split(/\s+/);
}

setClassList()
@param – element – geselecteerd html element
@param – array – lijst van alle individuele class namen

function setClassList(element, classes) {
	element.className = classes.join(' ');
}

Leave a Reply

Your email address will not be published. Required fields are marked *