javascript masquer l'affichage

JavaScript est souvent utilisé dans le développement Web pour obtenir des effets interactifs, dont l'un consiste à masquer et à afficher des éléments. Dans cet article, je vais vous expliquer comment masquer et afficher des éléments à l'aide de JavaScript.

1. Utilisez JavaScript pour masquer des éléments

La façon la plus simple d'utiliser JavaScript pour masquer un élément est d'utiliser l'attribut de style de l'élément.

Tout d'abord, nous devons récupérer les éléments qui doivent être masqués. Vous pouvez utiliser la méthode document.getElementById() pour obtenir l'élément avec un identifiant spécifié, ou vous pouvez utiliser la méthode document.querySelector() pour obtenir le premier élément correspondant au sélecteur CSS. Par exemple :

// 获取元素
var ele = document.getElementById("myElement");
// 或者
var ele = document.querySelector(".myClass");

Ensuite, nous pouvons le masquer en définissant l'attribut display de l'attribut style de l'élément sur none. Par exemple :

ele.style.display = "none";

De cette façon, nous pouvons obtenir l'effet de cacher des éléments.

2. Utilisez JavaScript pour afficher des éléments

De même, utiliser JavaScript pour afficher un élément est également très simple. Définissez simplement l'attribut display de l'élément sur sa valeur par défaut. De manière générale, la valeur de l'attribut d'affichage par défaut d'un élément est block, mais il peut également s'agir d'autres valeurs (telles que inline).

Avant d'afficher des éléments, nous devons récupérer les éléments qui doivent être affichés. De même, vous pouvez utiliser la méthode document.getElementById() ou document.querySelector() pour obtenir l'élément spécifié.

// 获取元素
var ele = document.getElementById("myElement");
// 或者
var ele = document.querySelector(".myClass");

Ensuite, nous pouvons l'afficher en définissant l'attribut display de l'attribut style de l'élément à sa valeur par défaut. Par exemple :

ele.style.display = "block";

3. Utilisez JavaScript pour basculer entre masquer et afficher des éléments

Maintenant, nous avons appris à utiliser JavaScript pour masquer et afficher des éléments. Cependant, nous devons parfois changer l’état d’affichage d’un élément. Par exemple, nous plaçons un bouton sur la page et cliquer sur le bouton peut changer l'état d'affichage d'un élément.

Dans ce cas, nous pouvons utiliser le code suivant pour changer l'état d'affichage de l'élément :

var ele = document.getElementById("myElement"); // 获取元素
if (ele.style.display === "none") { // 判断元素是否被隐藏
   ele.style.display = "block"; // 如果被隐藏，则显示元素
} else {
   ele.style.display = "none"; // 如果正在显示中，则隐藏元素
}

Ce code récupère d'abord l'élément spécifié et vérifie son affichage actuel. la valeur de l'attribut est aucune. Si tel est le cas, définissez sa propriété d'affichage sur block pour la rendre visible ; sinon, définissez sa propriété d'affichage sur none pour la masquer.

Maintenant, il nous suffit d'ajouter un écouteur d'événement de clic au bouton et d'appeler le code ci-dessus pour obtenir l'effet de changer l'état d'affichage de l'élément.

Dans le développement de pages, nous utilisons souvent JavaScript pour masquer et afficher des éléments afin d'obtenir une meilleure interaction utilisateur. Grâce à l'introduction de cet article, nous avons non seulement appris à masquer et à afficher des éléments, mais également à changer l'état d'affichage des éléments en JavaScript.

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!