Réinitialisation des styles via style en JavaScript
Supposons que nous décidions de masquer un élément lors d'un certain événement :
elem.style.display = 'none';
Supposons maintenant que nous décidions de
le réafficher. Cela signifie que
la propriété display doit
retourner à sa valeur d'origine.
Par exemple, comme ceci :
elem.style.display = 'block';
Le problème est que ce n'est pas pratique.
Car la valeur d'origine n'était pas nécessairement
block. Elle aurait pu
être flex, ou inline-block,
ou autre chose. Elle aurait pu être définie par nous
dans un fichier CSS, ou être celle par défaut
du navigateur. Suivre la bonne
valeur est difficile.
Heureusement, il existe un moyen de restaurer facilement la valeur d'origine d'une propriété. Il suffit d'attribuer une chaîne vide comme valeur de la propriété :
elem.style.display = '';
Étant donné une div et deux boutons. Lors d'un clic sur le premier bouton, masquez la div, et lors d'un clic sur le second - affichez-la.
Étant donné une div et deux boutons. Lors d'un clic sur le premier bouton, colorez la div en rouge, et lors d'un clic sur le second - restaurez la couleur d'origine.