web-dev-qa-db-fra.com

Que fait réellement style.display = ''?

Après avoir recherché ce problème pendant quelques heures, j'ai constaté que l'un des moyens les plus efficaces de basculer l'affichage d'un élément de page (en HTML) est de faire quelque chose comme:

// showing
document.getElementById('element').style.display = '';

// hiding
document.getElementById('element').style.display = 'none';

Question simple: Qu'est-ce que style.display = '' en fait?

Est-ce qu'il "réinitialise" la propriété d'affichage d'origine?

Ou supprime-t-il la propriété d'affichage, utilisant ainsi le style par défaut pour l'affichage?

..........................................

Ce serait bien de savoir: Quelqu'un connaît-il des liens vers des documents sur ce sujet?

(Oui, j'ai ce problème avec Google-d, mais je n'entre probablement pas le bon terme de recherche et je continue de proposer des résultats de recherche complètement indépendants.)

Merci pour toutes suggestions ou liens.

javascriptcsssyntax
47
Shawn Spencer

Oui, il réinitialise la propriété d'affichage de l'élément à sa valeur par défaut en masquant "display: none" en ligne, ce qui fait que l'élément retombe sur sa propriété d'affichage définie par les règles CSS de classement de la page.

Par exemple, voici un <div> avec l'ID de "myElement".

<div id="myElement"></div>

UNE <div> a un paramètre de display:block par défaut. Dans notre feuille de style, supposons que nous précisions que votre <div> doit être affiché sous la forme table:

div#myElement
{
    display:table;
}

Lors du chargement de votre page, le <div> s'affiche sous la forme table. Si vous souhaitez masquer ce <div> avec les scripts, vous pouvez effectuer l'une des opérations suivantes:

// JavaScript:
document.getElementById("myElement").style.display = 'none';

// jQuery:
$("#myElement").toggle(); // if currently visible
$("#myElement").hide();
$("#myElement").css({"display":"none"});

Tous ces éléments ont le même effet: ajouter une propriété style en ligne à votre <div>:

<div id="myElement" style="display:none"></div>

Si vous souhaitez afficher à nouveau l'élément, l'un d'eux fonctionnerait:

// JavaScript:
document.getElementById("myElement").style.display = "";

// jQuery:
$("#myElement").toggle(); // if currently hidden
$("#myElement").show();
$("#myElement").css({"display":""});

Celles-ci suppriment la propriété CSS display de la propriété style en ligne:

<div style=""></div>

Étant donné que le style en ligne ne spécifie plus un display, le <div> revient à être affiché sous la forme table, puisque c'est ce que nous mettons dans la feuille de style. Le <div> ne pas revient à être affiché comme block parce que notre CSS a remplacé ce paramètre par défaut; la suppression de la propriété inline display n'annule pas les règles de nos feuilles de style.

Pour les rires, voici la requête Google que j'ai utilisée pour vérifier ma réponse: javascript style display empty string default

... et quelques liens où cela est mentionné:

http://jszen.blogspot.com/2004/07/table-rowsrevealed.html

http://www.harrymaugans.com/2007/03/05/how-to-create-a-collapsible-div-with-javascript-and-css/ (pas dans l'article, mais dans la section commentaires)

42
Jake

Il définit le style display sur la valeur par défaut de cet élément. Pour la plupart des éléments sinon tous, la valeur par défaut est autre chose que none.

10
BoltClock

Il supprime la valeur de la propriété display afin que la valeur par défaut soit utilisée.

Il ne le fait pas réinitialise la propriété d'affichage d'origine.

Si vous avez par exemple ceci:

<span id="test" style="display:block;">b</span>

Et faites ceci:

document.getElementById('test').style.display = 'inline';
document.getElementById('test').style.display = '';

le style display utilisé pour l'élément finit par être inline parce que c'est la valeur par défaut de l'élément, il n'est pas réinitialisé au style spécifié dans le code HTML.

6
Guffa

Il définit le css pour l'affichage de cet élément sur null ce qui efface essentiellement ce qui a été défini et il revient à sa valeur par défaut.

1
Neal