Masquer un élément: la Différence entre Javascript l'attribut et de style CSS

Je me demande si il n'y a aucune différence dans le résultat lors de masquer un élément avec l'attribut JavaScript ou des feuilles de styles CSS.

Par exemple:

element.setAttribute("hidden", true);

vs

element.style.visibility = "hidden";

J'ai expérimenté un peu avec ces deux possibilités. Mon hypothèse est que, quand le cacher avec du JavaScript, l'élément est vraiment caché et retirées de la circulation; et lorsque le masquage de Style CSS de l'élément est tout simplement pas montré, mais toujours là.

Surtout, cela me semblait juste dans mes expériences, mais parfois non. Alors, quelle est la réelle différence entre ces deux possibilités?

C'est totalement différent des bêtes, en fait. En fait, vous feriez mieux de comparer display:none style avec hidden attr.
Différence entre une bonne et meilleure sera la réponse

OriginalL'auteur Jbartmann | 2013-12-11

  1. 12

    Il y a deux méthodes de base pour masquer un élément en CSS:

    Tout d'abord, il y a visibility: hidden; (ou element.style.visibility = "hidden";). Cela rend simplement l'élément invisible. Il faut encore de la place dans le document, il est encore une partie du flux.

    Puis il y a display: none; (ou element.style.display = "none";). Cela supprime l'élément du flux du document entièrement. Il est toujours présent dans le DOM, c'est juste pas rendu à la page.

    HTML5 hidden l'attribut (ou element.setAttribute("hidden", true);) est à peu près équivalent à display: none;.

    En fait, de donner des navigateurs plus anciens de la compatibilité avec l'attribut, c'est souvent ajouté à la feuille de style:

    [hidden] { display: none; }
    Dans la pratique, oui, ils seront équivalents. En théorie, l'attribut hidden est attribué à un élément qui ne devrait jamais être montré/lire (!) pour un utilisateur et never signifie ici in any situations possible. Citant le doc, "L'attribut caché ne doit pas être utilisé pour masquer un contenu qui pourrait légitimement être montré dans une autre présentation".

    OriginalL'auteur Olly Hodgson

  2. 5

    La différence entre ces deux lignes de code, c'est que l'un d'eux ajoute un attribut à l'élément avec la valeur donnée, tandis que l'autre définit une propriété à l'intérieur de la déclaration de style.

    Par exemple:

    Disons que votre élément variable a été un div. Lorsque vous appelez

    element.setAttribute("hidden", true);

    Les éléments maintenant ressembler à ceci:

    <div hidden="true"></div>

    Lorsque vous appelez

    element.style.visibility = "hidden";

    Vous obtiendrez:

    <div style="visibility: hidden;"></div>
    N'utilisez pas de true, au lieu d'utiliser '' pour économiser 8 octets de mémoire. Désolé, je suis un micro-performance freak donc j'ai juste eu à le dire.
    Wow, je suppose que vous êtes. Bon appel. J'ai obtenu jusqu'-le droit de vote. Merci

    OriginalL'auteur MDiesel