Heim > Artikel > Web-Frontend > So verwenden Sie das style.display-Attribut in JavaScript

So verwenden Sie das style.display-Attribut in JavaScript

不言Original: 2019-01-07 14:45:2716726Durchsuche

Die Eigenschaft style.display ist die Anzeigeeigenschaft des Style-Objekts, mit der der Stil des Elements frei geändert werden kann. Sie können beispielsweise verschiedene Stile wie Elementhöhe und -breite, Farbe und Hintergrund usw. hinzufügen.

Werfen wir einen Blick auf das Anzeigeattribut

Das Anzeigeattribut hat die Aufgabe, den Anzeigestil von anzugeben das Element.

Zeigen Sie das Element nicht an oder zeigen Sie es als Blockelement an, oder Sie können verschiedene Anzeigemethoden angeben

Grundlegende Verwendung des style.display-Attributs

Sehen wir uns den Code wie folgt an

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
<img  id="style1" src="img/girl.jpg"    style="max-width:90%"  style="max-width:90%" alt="So verwenden Sie das style.display-Attribut in JavaScript" >
    <br>
    <input type="button" value="Hide" onclick="hide();"/>
    <br>
    <input type="button" value="Show" onclick="show();"/>

</body>
<script>
    function hide() {
        var e = document.getElementById("style1");
        e.style.display = "none";
    }
    function show(){
        var e = document.getElementById("style1");
        e.style.display = "block";
    }
</script>
</html>

Verwenden Sie die Eigenschaft style.display im obigen Code, um das Bild anzuzeigen oder auszublenden.

Zuerst wird das img-Tag verwendet, um das Bild anzuzeigen, und unter dem Bild werden zwei Schaltflächen erstellt.

Die erste Schaltfläche ist die Schaltfläche „Ausblenden“, um das Bild auszublenden.

Der zweite Button ist der Show-Button, um das Bild erneut anzuzeigen.

So verwenden Sie das style.display-Attribut in JavaScript

gibt die Ausblendfunktion für das Onclick-Attribut der Schaltfläche „Ausblenden“ an.

Die Hide-Funktion verwendet zunächst die Methode getElementById, um das Bildelement abzurufen.

Nachdem wir das Bildelement erhalten haben, greifen wir auf das style.display-Attribut des Elements zu und geben die Zeichenfolge none an.

Sie können ein Element ausblenden, indem Sie den Wert durch keinen ersetzen.

Klicken Sie auf die Schaltfläche „Ausblenden“, um das Bild auszublenden

So verwenden Sie das style.display-Attribut in JavaScript

Durch Klicken auf die Schaltfläche „Ausblenden“ wird das Bild gelöscht und die Position der Schaltfläche erhöht.

Klicken Sie stattdessen auf die Schaltfläche „Anzeigen“ und das Bild wird wieder angezeigt.

Die Show-Funktion wird für das Onclick-Attribut der Show-Schaltfläche angegeben.

Wie die Funktion „Hide“ greift die Funktion „Show“ auf die Eigenschaft „style.display“ zu, nachdem sie das Bildelement mithilfe der Methode „getElementById“ abgerufen hat.

Dann wird anstelle des String-Blocks der Bildblock angezeigt und das Bild erneut angezeigt.

So verwenden Sie das style.display-Attribut in JavaScript

Was ist der Unterschied zwischen Anzeige und Sichtbarkeit?

Im obigen Beispielcode wird die Anzeigeeigenschaft des Stilobjekts verwendet, um die Anzeigeeinstellungen des Bildes zu ändern.

Zusätzlich zum Anzeigeattribut können Sie jedoch auch das Sichtbarkeitsattribut verwenden, um Bilder ein- oder auszublenden.

Der Code lautet wie folgt

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
    <img  id="drag1" src="img/flowers.jpg"    style="max-width:90%"  style="max-width:90%" alt="So verwenden Sie das style.display-Attribut in JavaScript" >
    <br>
    <input type="button" value="Hide with DISPLAY" onclick="hide1();"/>
    <br>
    <input type="button" value="Hide with VISIBILITY" onclick="hide2();"/>

</body>
<script>
    function hide1() {
        var e = document.getElementById("drag1");
        e.style.display = "none";
    }
 
    function hide2() {
        var e = document.getElementById("drag1");
        e.style.visibility = "hidden";
    }
</script>
</html>

Im obigen Code haben wir zwei Schaltflächen erstellt, um das Bild auszublenden.

Die erste ist die Schaltfläche „Mit ANZEIGE ausblenden“, die das gleiche Anzeigeattribut wie zuvor verwendet.

Die zweite ist die Schaltfläche „Mit SICHTBARKEIT ausblenden“, die mithilfe des Sichtbarkeitsattributs ausgeblendet wird.

So verwenden Sie das style.display-Attribut in JavaScript

gibt die hide2-Funktion für das onclick-Attribut der zweiten Schaltfläche an.

Die Funktion hide2 verwendet die Methode getElementById, um das Bildelement abzurufen und auf das Attribut style.visibility zuzugreifen.

Dann blenden Sie das Bild aus, indem Sie die ausgeblendete Zeichenfolge ersetzen.

Wie bereits erwähnt, führt das Klicken auf die Schaltfläche dazu, dass das Bild verschwindet und die Schaltfläche unter dem Bild angezeigt wird.

Wenn Sie jedoch die Klickschaltfläche der Sichtbarkeit verwenden, ist der Teil mit dem Bild nur leer und der Platz bleibt erhalten.

So verwenden Sie das style.display-Attribut in JavaScript

Sie können deutlich erkennen, dass der Button an seiner ursprünglichen Position bleibt, die Position des Bildes leer ist und der Platz erhalten bleibt.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das style.display-Attribut in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript 字符串对象 display

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie json.stringify in JavaScriptNächster Artikel：So verwenden Sie json.stringify in JavaScript

In Verbindung stehende Artikel

Mehr sehen