Masquer un élément: différence entre l'attribut Javascript et le style CSS
Je me demande s'il y a une différence dans le résultat lors du masquage d'un élément avec un attribut JavaScript ou un style CSS.
Par exemple:
element.setAttribute("hidden", true);
contre
element.style.visibility = "hidden";
J'ai un peu expérimenté ces deux possibilités. Mon hypothèse est que lorsque vous le cachez avec JavaScript, l'élément est vraiment caché et retiré du flux; et lorsque vous vous cachez avec le style CSS, l'élément n'est tout simplement pas affiché mais toujours là.
Surtout, cela semblait juste dans mes expériences, mais parfois non. Alors, quelle est la vraie différence entre ces deux possibilités?
Il existe deux méthodes de base pour masquer un élément avec CSS:
Tout d'abord, il y a visibility: hidden; (ou element.style.visibility = "hidden";). Cela rend simplement l'élément invisible. Cela prend toujours de la place dans le document, cela fait toujours partie du flux.
Ensuite, il y a display: none; (ou element.style.display = "none";). Cela supprime complètement l'élément du flux du document. Il est toujours présent dans le DOM, il n'est tout simplement pas rendu à la page.
hidden attribut HTML5 (ou element.setAttribute("hidden", true);) est à peu près équivalent à display: none;.
En fait, pour donner aux anciens navigateurs une compatibilité avec l'attribut, cela est souvent ajouté à la feuille de style:
[hidden] { display: none; }
La différence entre ces deux lignes de code est que l'une d'elles ajoute un attribut à l'élément avec la valeur donnée, tandis que l'autre définit une propriété dans la déclaration de style.
Par exemple:
Disons que votre variable d'élément était un div. Quand vous appelez
element.setAttribute("hidden", true);
Les éléments ressembleront maintenant à ceci:
<div hidden="true"></div>
Quand vous appelez
element.style.visibility = "hidden";
Tu auras:
<div style="visibility: hidden;"></div>