Veranderen van de css-class van een element

Door het toekennen van een css-class kunnen we stijldefinities zeer gericht op bepaalde html-elementen laten werken. Op de pagina 'Dropdown-menu' zien we daarvan een spectaculair voorbeeld: Met vele regels css wordt de geneste lijst omgevormd tot een dropdown-menu met hover-effect. Echter de stijldefinities zijn zodanig dat dit alleen op de lijst werkt met class='menu2'. Daardoor blijft iedere andere lijst ongemoeid. Als het nu mogelijk is om die class door de bezoeker te laten veranderen, dan zijn er spectaculaire veranderingen mogelijk. Wellicht denken we bij het veranderen van de styling in de eerste plaatst aan het manipuleren van het DOM d.m.v. JavaScriptregels zoals: document.getElementById("id").style.color="white";, maar dat zou ondoenlijk zijn als er veel veranderd moet worden. We kunnen dus ook de alternatieve blokken met stijlregels in het stylesheet opnemen, gekoppeld aan een bepaalde class. Nu hoeven we enkel de juiste class aan het element te koppelen en in één klap wordt het hele pakket aan stijldefinities actief. Dit maakt het ook onderhoudsvriendelijker want de styling staat nu netjes daar waar het hoort en niet ergens in een geobfuscated JavaScript-bestand.

Voor het manipuleren van de classname van een element is ook weer JavaScript nodig. We onderscheiden verschillende situaties: Het eenvoudigste is om een className toe te voegen aan een element dat dit nog niet eerder had. Ieder DOM-element heeft een 'className' attribuut. Deze bevat alle classes van dat element gescheiden door spaties. Het eenvoudigste is dus om deze string een bepaalde naam toe te kennen of om er een lege string van te maken. In die gevallen volstaat het commando: document.getElementById("pipo").className="show";. Maar het wordt aanzienlijk lastiger als het betreffende element mogelijk al één of meerdere classes bevat. Die mogen natuurlijk niet gewist worden. Daarover worden hier leerzame dingen gezegd.

Naar het schijnt zijn er op dit gebied ook nieuwe ontwikkelingen: In moderne browsers heeft elk element een classList waarvan je afzonderlijke elementen kunt toevoegen of verwijderen met add en remove. Dan is dat omslachtige gedoe met die regexp ook niet meer nodig.