Comment implémenter CSS pour contrôler l'affichage et le masquage des couches DIV-tutoriel CSS-php.cn

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

不言

Libérer： 2018-06-14 17:10:58

original

2945 Les gens l'ont consulté

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>

Copier après la connexion

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!