So verbergen und zeigen Sie div in Javascript an-js-Tutorial-php.cn

So verbergen und zeigen Sie div in Javascript an

青灯夜游

Freigeben： 2021-04-26 17:35:18

Original

8661 Leute haben es durchsucht

Einstellungsmethode: 1. Verwenden Sie das Anzeigeattribut des Stilobjekts. Der Wert ist „none“, um das div-Element auszublenden, und der Wert ist „block“, um das Element anzuzeigen. 2. Verwenden Sie das Sichtbarkeitsattribut des Stilobjekts . Der Wert ist „versteckt“, um das div-Element auszublenden, der Wert ist „sichtbar“, um das Element anzuzeigen.

So verbergen und zeigen Sie div in Javascript an

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Es gibt zwei Möglichkeiten, Divs in JS auszublenden und anzuzeigen:

Methode 1: Anzeigeattribut im Elementstilobjekt festlegen

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

Nach dem Login kopieren

Methode 2: Sichtbarkeitsattribut im Elementstilobjekt festlegen

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

Nach dem Login kopieren

Der Unterschied zwischen diesen beiden Methoden besteht darin, dass nach dem Ausblenden der Anzeige die ursprüngliche Position nicht belegt wird, nach dem Ausblenden durch Sichtbarkeit jedoch die Elementposition weiterhin belegt ist.

Der Effekt ist wie folgt:
So verbergen und zeigen Sie div in Javascript an

Der erste Weg verbirgt die Vorderseite

So verbergen und zeigen Sie div in Javascript an

und nimmt nach dem Ausblenden nicht die ursprüngliche Position ein

So verbergen und zeigen Sie div in Javascript an

Der zweite Weg verbirgt die Vorderseite

So verbergen und zeigen Sie div in Javascript an

Nachdem es auf zwei Arten versteckt wurde, befindet es sich immer noch an der ursprünglichen Position.

Der vollständige Code lautet wie folgt:

<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>

Nach dem Login kopieren

[Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene]

Das obige ist der detaillierte Inhalt vonSo verbergen und zeigen Sie div in Javascript an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!