So verbergen Sie den Elementwert in Javascript-Front-End-Fragen und Antworten-php.cn

So verbergen Sie den Elementwert in Javascript

藏色散人

Freigeben： 2023-01-07 11:44:01

Original

3484 Leute haben es durchsucht

So verbergen Sie Elementwerte in JavaScript: 1. Legen Sie die Anzeige im Stilattribut des Elements fest, mit Anweisungen wie „t.style.display= 'none';“; 2. Legen Sie die Sichtbarkeit im Stilattribut des Elements fest .

So verbergen Sie den Elementwert in Javascript

Die Betriebsumgebung dieses Artikels: Windows7-System, Javascript-Version 1.8.5, DELL G3-Computer

Javascript zum Ein- und Ausblenden von Elementen

Es gibt zwei Möglichkeiten zum Ausblenden und Seitenelemente anzeigen:

Methode 1: Legen Sie die Anzeige im Stilattribut des Elements fest

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

Nach dem Login kopieren

Methode 2: Legen Sie die Sichtbarkeit im Stilattribut des Elements fest

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

Nach dem Login kopieren

Der Unterschied zwischen diesen beiden Methoden ist: Festlegen der Anzeige Zum Ausblenden wird nicht die ursprüngliche Position eingenommen, sondern durch Sichtbarkeit. Nach dem Ausblenden ist die Elementposition immer noch besetzt.
Der Effekt ist wie folgt:
So verbergen Sie den Elementwert in Javascript

Der erste Weg verbirgt die Vorderseite

So verbergen Sie den Elementwert in Javascript

ohne die ursprüngliche Position nach dem Ausblenden einzunehmen

So verbergen Sie den Elementwert in Javascript

Der zweite Weg verbirgt die Vorderseite

So verbergen Sie den Elementwert in Javascript

Danach auf diese Weise verborgen, nimmt es immer noch seine ursprüngliche Position ein.

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>
	<p id="test" style="border: solid 1px #e81515; width:500px;">
	    这是一个将要隐藏的p。<br>
	    这是一个将要隐藏的p。<br>
	    这是一个将要隐藏的p。<br>
	    这是一个将要隐藏的p。<br>
	</p>
	<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 Sie den Elementwert in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!