Maison > Article > interface Web > Comment implémenter CSS pour contrôler l'affichage et le masquage des couches DIV

Comment implémenter CSS pour contrôler l'affichage et le masquage des couches DIV

不言original: 2018-06-14 17:10:582935parcourir

Cet article vous présente la méthode de contrôle de l'affichage et du masquage de la couche p avec CSS. C'est la connaissance de base qui doit être maîtrisée dans l'apprentissage front-end. Elle est très bonne et a une valeur de référence. ensemble

Les propriétés d'affichage et de visibilité en CSS

Les propriétés d'affichage et de visibilité en CSS peuvent masquer et afficher des éléments html y compris la couche p. Les deux se ressemblent beaucoup et beaucoup de gens les confondent. Les propriétés des deux sont présentées ci-dessous :

display:none|block;

display:none;

Masquer l'élément html, pour être précis , pour éliminer l'élément dans le navigateur sans occuper d'espace à l'écran. S'il y a d'autres éléments en dessous, il se déplacera vers cette zone d'espace (par exemple, il y a 100 yuans sur la table, et maintenant je le mets dans un tiroir pour le cacher, et tout le reste peut être placé sur la table où les 100 yuans sont placés).

dispaly:block;

Afficher l'élément html caché Si un autre élément occupe l'espace, il descendra et l'espace sera alloué à l'élément d'origine. Possession. (Sortez les 100 yuans du tiroir et remettez-les sur la table).

visibility:hidden|visible;

visibility:hidden;

Masquer l'élément, il est vraiment caché, mais il occupe toujours cet espace. A ce moment-là (il y avait 100 yuans sur la table. Je l'ai recouvert d'une nappe pour le cacher, mais l'argent était toujours là).

visibilité:visible;

Laissez l'élément s'afficher (enlevez la nappe et voyez 100 yuans).

Ainsi, l'affichage et la visibilité contrôlent si l'élément html existe et s'il est affiché respectivement. L'attribut d'affichage définit si l'élément existe ou non, tandis que l'attribut de visibilité contrôle uniquement si l'élément est affiché. existe toujours.

Utilisons le code comme exemple. Code :

<html>   
<head>   
<script type="text/javascript">   
function testDisplay()   
{   
    var pD = document.getElementById("testD");   
    if(pD.style.display=="none")   
    {   
        pD.style.display = "block";   
    }   
    else   
    {   
        pD.style.display = "none";   
    }   
}   
function testVisibility()   
{   
    var pV = document.getElementById("testV");   
    if(pV.style.visibility =="hidden")   
    {   
        pV.style.visibility ="visible";   
    }   
    else   
    {   
        pV.style.visibility = "hidden";   
    }   
}   
</script>   
</head>   
</body>   
<p id="testD" style="border:#ddd 1px solid">   
    <p style="display:block;border:#ccc 2px solid">   
        <p style="visibility:visible;border:#aaa 2px solid">   
        Display   
        </p>   
    </p>   
</p>   
<p id="testV" style="border:#ddd 1px solid">   
    <p style="display:block;border:#ccc 2px solid">   
        <p style="visibility:visible;border:#aaa 2px solid">   
        Visibility   
        </p>   
    </p>   
</p>   
<input type="button" value="TestDisplay" onclick="testDisplay()"/>   
<input type="button" value="TestVisibility" onclick="testVisibility()"/>   
</body>   
</html>

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Plus Veuillez faire attention au site Web PHP chinois pour le contenu connexe !

Recommandations associées :

À propos de CSS flex Mise en page flexible

Analyse du sélecteur de pseudo-classe CSS3 par défaut

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：À propos de la disposition flexible de CSS flexArticle suivant：À propos de la disposition flexible de CSS flex

Articles Liés

Voir plus