contenu HTML masqué

Masquage de contenu HTML : attribut d'affichage CSS et attribut classList JavaScript

Le masquage de contenu en HTML peut être réalisé grâce à diverses techniques, notamment l'utilisation de l'attribut d'affichage CSS, de l'attribut de visibilité et de l'attribut d'opacité, et l'utilisation de l'attribut ClassList et des attributs de style JavaScript, etc. Dans cet article, nous présenterons comment utiliser l'attribut display de CSS et l'attribut classList de JavaScript pour masquer le contenu du HTML.

1. Utilisez l'attribut display du CSS pour masquer le contenu HTML

L'attribut display du CSS peut contrôler la façon dont un élément est affiché sur la page. Les valeurs d'attribut d'affichage couramment utilisées incluent block, inline, inline-block, table, none, etc. Parmi eux, la valeur none signifie que l'élément est complètement supprimé de la page, c'est-à-dire qu'il n'occupe pas d'espace sur la page.

Ce qui suit est un exemple d'utilisation de l'attribut display de CSS pour masquer le contenu :

<div id="myDiv">这是一个要隐藏的文本。</div>

Enveloppez le texte à masquer dans un élément div et définissez l'attribut CSS pour cet élément div :

#myDiv {
    display: none;
}

De cette façon, le le texte sera masqué et ne sera plus affiché sur la page.

Il est à noter que lors de l'utilisation de l'attribut display:none pour masquer un élément HTML, l'élément sera complètement supprimé et n'occupera pas d'espace sur la page. Si vous devez masquer un élément tout en occupant de l'espace, vous pouvez utiliser l'attribut visibilité:hidden ou l'attribut opacity:0.

2. Utilisez l'attribut classList de JavaScript pour masquer le contenu HTML

JavaScript peut masquer les éléments HTML via les opérations DOM. Parmi eux, l'attribut classList peut être utilisé pour obtenir ou modifier l'attribut class de l'élément. L'attribut de classe est une chaîne contenant un ou plusieurs noms de classe séparés par des espaces. Utilisez l'attribut classList pour ajouter, supprimer et changer facilement les noms de classe des éléments.

Ce qui suit est un exemple d'utilisation de l'attribut classList de JavaScript pour masquer le contenu HTML :

<div id="myDiv">这是一个要隐藏的文本。</div>

Enveloppez le texte à masquer dans un élément div et ajoutez un nouveau nom de classe CSS masqué à cet élément div :

#myDiv {
    display: block;
}
.hidden {
    display: none;
}

var myDiv = document.getElementById("myDiv");
myDiv.classList.add("hidden");

De cette façon , le texte sera masqué et ne sera plus affiché sur la page. Lorsque vous devez afficher à nouveau le texte, il vous suffit de modifier le nom de classe CSS de l'élément en un nom de classe qui n'inclut pas masqué, comme indiqué ci-dessous :

myDiv.classList.remove("hidden");

De cette façon, la valeur de l'attribut d'affichage de l'élément sera réinitialisée. à la valeur par défaut (comme avant). S'il n'est pas défini, c'est un bloc.

3. Conclusion

Le masquage de contenu HTML est une technologie couramment utilisée dans le développement Web. Cet article présente l'utilisation de l'attribut d'affichage CSS et de l'attribut JavaScript classList pour masquer le contenu HTML. L'attribut display de CSS peut facilement masquer des éléments, mais il convient de noter que les éléments masqués seront complètement supprimés ; tandis que l'attribut classList de JavaScript peut masquer et afficher dynamiquement des éléments, ce qui est plus flexible. Dans les applications pratiques, différentes technologies peuvent être choisies en fonction de la situation réelle.

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!