Stijlen resetten via style in JavaScript
Stel dat we besloten hebben om een element te verbergen bij een bepaalde gebeurtenis:
elem.style.display = 'none';
Stel dat we het nu weer willen tonen.
Dit betekent dat we de eigenschap
display zijn
oorspronkelijke waarde moeten teruggeven.
Bijvoorbeeld zo:
elem.style.display = 'block';
Het probleem is dat dit niet handig is.
De oorspronkelijke waarde was niet per se
block. Het kon
flex zijn, of inline-block,
of iets anders. Het kon door ons zijn ingesteld
in een CSS-bestand, of het kon de standaardwaarde
van de browser zijn. Het is lastig om de juiste
waarde bij te houden.
Gelukkig is er een manier om eenvoudig de oorspronkelijke waarde van een eigenschap terug te zetten. Je hoeft alleen maar een lege string aan de eigenschap toe te wijzen:
elem.style.display = '';
Gegeven een div en twee knoppen. Verberg de div bij een klik op de eerste knop, en toon hem bij een klik op de tweede.
Gegeven een div en twee knoppen. Verf de kleur van de div rood bij een klik op de eerste knop, en zet de oorspronkelijke kleur terug bij een klik op de tweede.
