Maison > Article > interface Web > Comment contrôler l'affichage et le masquage du corps avec javascript

Comment contrôler l'affichage et le masquage du corps avec javascript

PHPzoriginal: 2023-04-24 15:48:491373parcourir

Dans le développement front-end, JavaScript est un élément indispensable, et contrôler l'affichage et le masquage des éléments de page est une exigence très courante. Pour contrôler l'affichage et le masquage de la page entière, vous devez contrôler l'affichage et le masquage de l'élément body. Cet article explique comment utiliser Javascript pour contrôler l'affichage et le masquage de l'élément body.

Obtenir l'élément corps

Tout d'abord, nous devons obtenir l'élément corps. En javascript, il peut être obtenu via document.body. Par exemple :

var body = document.body;

Contrôler l'affichage et le masquage de l'élément body

Ensuite, nous devons contrôler l'affichage et le masquage de l'élément body. Ceci peut être réalisé en modifiant l'attribut display dans l'attribut style de l'élément body. Si l'attribut d'affichage est défini sur "aucun", l'élément body sera masqué ; si l'attribut d'affichage est défini sur "block", l'élément body sera affiché. Par exemple :

// 隐藏body元素
body.style.display = "none";

// 显示body元素
body.style.display = "block";

Contrôlez la feuille de style

Cependant, dans le développement réel, nous exploitons rarement directement l'attribut de style de l'élément. Au lieu de cela, les feuilles de style sont utilisées pour contrôler le style des éléments de la page. Par conséquent, le contrôle de l'affichage et du masquage de l'élément de corps peut également être réalisé en utilisant la feuille de style.

Dans la balise head de la page HTML, vous pouvez ajouter la feuille de style suivante :

<style>
    body.hidden {
        display: none;
    }
</style>

Cette feuille de style définit une classe nommée "hidden", dans laquelle l'attribut display de l'élément body est mis à "none", ce qui is L'élément body peut être masqué.

Maintenant, nous pouvons contrôler l'élément body pour ajouter ou supprimer la classe "cachée" via javascript. Par exemple :

// 隐藏body元素
body.classList.add("hidden");

// 显示body元素
body.classList.remove("hidden");

Exemple d'application

Enfin, regardons un exemple d'application complet. Supposons que nous ayons une page avec un bouton dessus. Cliquer sur le bouton peut contrôler l’affichage et le masquage de la page. Nous pouvons l'implémenter en suivant les étapes suivantes :

Ajoutez une feuille de style à la balise head, définissez une classe nommée "hidden" et définissez l'attribut d'affichage de l'élément body sur "none".

<head>
    <style>
        body.hidden {
            display: none;
        }
    </style>
</head>

Ajoutez un bouton à la page et ajoutez un événement de clic.

<body>
    <button onclick="toggle()">显示/隐藏</button>
    <!-- 页面内容 -->
</body>

Définissez la fonction bascule en javascript, qui contrôle l'affichage et le masquage de l'élément body en exploitant la feuille de style.

function toggle() {
   var body = document.body;
   body.classList.toggle("hidden");
}

Maintenant, lorsque l'utilisateur clique sur le bouton, la fonction bascule sera déclenchée, qui contrôle l'affichage et le masquage de l'élément body en actionnant la feuille de style.

Résumé

A travers les exemples ci-dessus, nous pouvons voir qu'en JavaScript, contrôler l'affichage et le masquage de l'élément body peut être réalisé en exploitant directement l'attribut style de l'élément, ou en exploitant la feuille de style. Pour ceux qui ont besoin d’un contrôle plus flexible sur le style de la page, il est recommandé d’utiliser une feuille de style pour contrôler le style des éléments.

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!

JavaScript html class 事件样式表 display

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：Comment implémenter des paramètres de longueur variable dans la fonction javascriptArticle suivant：Comment implémenter des paramètres de longueur variable dans la fonction javascript

Articles Liés

Voir plus