Tilbakestilling av stiler via style i JavaScript
La oss si at vi av en eller annen hendelse bestemmer oss for å skjule et element:
elem.style.display = 'none';
La oss nå si at vi bestemmer oss for å vise
det igjen. Det betyr at
egenskapen display må
få tilbake sin opprinnelige verdi.
For eksempel slik:
elem.style.display = 'block';
Problemet er at dette ikke er praktisk.
Den opprinnelige verdien var ikke nødvendigvis
akkurat block. Den kunne
vært flex, eller inline-block,
eller noe annet. Den kunne vært satt av oss
i en CSS-fil, eller den kunne vært hentet fra nettleseren
som standard. Det er vanskelig å holde styr på den riktige
verdien.
Heldigvis finnes det en måte å enkelt gi den opprinnelige verdien til egenskapen tilbake. Du trenger bare å tilordne en tom streng som verdi for egenskapen:
elem.style.display = '';
Gitt en div og to knapper. Ved klikk på den første knappen skal du skjule diven, og ved klikk på den andre - vis den.
Gitt en div og to knapper. Ved klikk på den første knappen skal du endre fargen på diven til rød, og ved klikk på den andre - tilbakestill den opprinnelige fargen.