Comment masquer et afficher div en javascript-js tutoriel-php.cn

Comment masquer et afficher div en javascript

青灯夜游

Libérer： 2021-04-26 17:35:18

original

8653 Les gens l'ont consulté

Méthode de paramétrage : 1. Utilisez l'attribut d'affichage de l'objet de style, la valeur est "aucun" pour masquer l'élément div et la valeur est "block" pour afficher l'élément 2. Utilisez l'attribut de visibilité ; de l'objet de style, la valeur "cachée" " peut masquer l'élément div et la valeur " visible " peut afficher l'élément.

Comment masquer et afficher div en javascript

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Il existe deux façons de masquer et d'afficher des divs dans JS :

Méthode 1 : définir l'attribut d'affichage dans le style de l'élément object

var t = document.getElementById(&#39;test&#39;);//选取id为test的div元素
t.style.display = &#39;none&#39;;// 隐藏选择的元素
t.style.display = &#39;block&#39;;// 以块级样式显示

Copier après la connexion

Méthode 2 : définir l'attribut de visibilité dans le style de l'élément object

var t = document.getElementById(&#39;test&#39;);//选取id为test的div元素
t.style.visibility = &#39;hidden&#39;;// 隐藏元素
t.style.visibility = &#39;visible&#39;;// 显示元素

Copier après la connexion

La différence entre ces deux méthodes est la suivante : définir l'affichage pour qu'il soit masqué n'occupe pas la position d'origine et la position de l'élément est toujours occupée après s'être cachée par visibilité.

L'effet est le suivant :
Comment masquer et afficher div en javascript

La première voie est avant de se cacher

Comment masquer et afficher div en javascript

N'occupez pas la position d'origine après vous être caché

Comment masquer et afficher div en javascript

La deuxième méthode consiste à vous cacher avant

Comment masquer et afficher div en javascript

Après s'être caché des deux manières, il occupe toujours la position d'origine.

Le code complet est le suivant :

<head>
    <script type="text/javascript">
        function fn1(){
            var t = document.getElementById(&#39;test&#39;);
            if(t.style.display === &#39;none&#39;) {
                t.style.display = &#39;block&#39;;// 以块级元素显示
            } else {
                t.style.display = &#39;none&#39;; // 隐藏
            }
        }

        function fn2(){
            var t = document.getElementById(&#39;test&#39;);
            if(t.style.visibility === &#39;hidden&#39;) {
                t.style.visibility = &#39;visible&#39;;
            } else {
                t.style.visibility = &#39;hidden&#39;;
            }
        }
    </script>
</head>

<body>
	<div id="test" style="border: solid 1px #e81515; width:500px;">
	    这是一个将要隐藏的DIV。<br>
	    这是一个将要隐藏的DIV。<br>
	    这是一个将要隐藏的DIV。<br>
	    这是一个将要隐藏的DIV。<br>
	</div>
	<button onclick="fn1()">第一种方式</button>
	<button onclick="fn2()">第二种方式</button>
</body>

Copier après la connexion

[Apprentissage recommandé : Tutoriel avancé 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!