Resetování stylů pomocí style v JavaScriptu
Předpokládejme, že jsme se na základě nějaké události rozhodli skrýt prvek:
elem.style.display = 'none';
Nyní předpokládejme, že jsme se rozhodli
ho znovu zobrazit. To znamená, že
vlastnosti display je potřeba
vratit její původní hodnotu.
Například takto:
elem.style.display = 'block';
Problém je v tom, že to není pohodlné.
Původní hodnota nemusela být nutně
právě block. Mohla to být
flex, inline-block,
nebo něco jiného. Mohla být nastavena námi
v CSS souboru, nebo mohla být brána prohlížečem
jako výchozí. Sledovat správnou
hodnotu je složité.
Naštěstí existuje způsob, jak snadno vrátit původní hodnotu vlastnosti zpět. Stačí jí jako hodnotu vlastnosti přiřadit prázdný řetězec:
elem.style.display = '';
Je dán div a dvě tlačítka. Po kliknutí na první tlačítko skryjte div, a po kliknutí na druhou - zobrazte.
Je dán div a dvě tlačítka. Po kliknutí na první tlačítko obarvěte barvu divu na červenou barvu, a po kliknutí na druhou - vraťte původní barvu.
