Resetování stylů pomocí style v JavaScriptu

Předpokládejme, že jsme se na základě nějaké události rozhodli skrýt prvek:

javascriptelem.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:

javascriptelem.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:

javascriptelem.style.display = '';
Задание 1

Je dán div a dvě tlačítka. Po kliknutí na první tlačítko skryjte div, a po kliknutí na druhou - zobrazte.

Задание 2

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.