Comment puis-je afficher un élément qui a display: none dans une règle CSS?

J'ai une simple feuille de style css externe qui est la suivante :

div.hideBox {
    display:none;
}

Ainsi, lorsque le chargement de la page html, la balise div avec la classe de l'attribut 'hideBox' n'apparaîtra pas sur la page, qui est ce que je veux. Mais je le cocher pour afficher/s'affiche lorsqu'un utilisateur clique sur un bouton sur la même page. J'ai essayé d'utiliser l'événement onclick pour ce faire, mais la div de ne pas s'afficher.

Ainsi, par exemple, le code serait :

<script language="javascript">
function showmydiv() {
document.getElementById('mybox').style.display = "";
}

</script>
</head>
<body>
<div id="mybox" class="hideBox">
some output of text
</div>
<input type="button" name="ShowBox" value="Show Box" onclick="showmydiv()">

Ce qui est étrange, c'est qu'une configuration similaire à ce fonctionne quand j'utilise visibility:hidden; position:absolute; et je peux utiliser une fonction JavaScript pour afficher le <div>.

Ce que je fais mal ici?

  • Cela se passe dans tous les navigateurs?
  • Oui, je l'ai testé sous IE, Firefox et Chrome.
InformationsquelleAutor katura | 2010-11-01
  1. 78

    Parce que le réglage de la div's display propriété de style à "" ne change rien dans la règle CSS lui-même. Que, fondamentalement, tout simplement crée un "vide" inline règle CSS, qui n'a pas d'effet au-delà de la compensation de la même propriété sur cet élément.

    Vous en avez besoin de quelque chose qui a une valeur:

    document.getElementById('mybox').style.display = "block";

    Ce que vous faites serait de travail si vous étiez le remplacement d'un inline style de la div, comme ceci:

    <div id="myBox" style="display: none;"></div>

document.getElementById('mybox').style.display = "";
    • Je crois que ce qui se passe lorsque vous définissez l'affichage de "" est-ce qu'il retourne à l'affichage d'origine de la valeur (qui a été définie dans le css).
    • lorsque vous définissez une ligne display style de "" il supprime simplement le style en ligne.
    • Que faire si je ne le souhaitez pas, il n'affiche que le bloc? J'ai juste besoin de la valeur par défaut (vide) la valeur pour remplacer celle qui vient de la classe.
    • La valeur par défaut n'est pas vide, mais "inline" ou "bloc", selon l'élément.
    InformationsquelleAutor Matt Ball
  2. 13
    document.getElementById('mybox').style.display = "block";
    InformationsquelleAutor Galen
  3. 6

    essayer de réglage de l'affichage à bloquer dans votre javascript au lieu d'une valeur vide.

    InformationsquelleAutor Kobby
  4. 2

    Je vois que vous voulez vous écrire de courtes javascript pour cela, mais avez-vous pensé de l'utilisation des Cadres pour la manipulation de HTML à la place? jQuery est mon outil préféré pour une telle tâche, même si ses un overkill pour votre question, comme il l'a DONC de nombreuses fonctionnalités supplémentaires.

    Jetez un oeil à jQuery ici

    InformationsquelleAutor BerggreenDK