Heim > Artikel > Web-Frontend > So steuern Sie das Anzeigen und Ausblenden von Körpern mit Javascript

So steuern Sie das Anzeigen und Ausblenden von Körpern mit Javascript

PHPzOriginal: 2023-04-24 15:48:491428Durchsuche

In der Frontend-Entwicklung ist JavaScript ein unverzichtbarer Bestandteil und die Steuerung der Anzeige und Ausblendung von Seitenelementen ist eine sehr häufige Anforderung. Um das Ein- und Ausblenden der gesamten Seite zu steuern, müssen Sie das Ein- und Ausblenden des Body-Elements steuern. In diesem Artikel wird erläutert, wie Sie mithilfe von Javascript das Anzeigen und Ausblenden des Body-Elements steuern.

Erhalten Sie das Körperelement

Zuerst müssen wir das Körperelement erhalten. In Javascript kann es über document.body abgerufen werden. Zum Beispiel:

var body = document.body;

Steuern Sie die Anzeige und das Ausblenden des Körperelements.

Als nächstes müssen wir die Anzeige und das Ausblenden des Körperelements steuern. Dies kann durch Ändern des Anzeigeattributs im Stilattribut des Körperelements erreicht werden. Wenn das Anzeigeattribut auf „none“ gesetzt ist, wird das Körperelement ausgeblendet; wenn das Anzeigeattribut auf „block“ gesetzt ist, wird das Körperelement angezeigt. Zum Beispiel:

// 隐藏body元素
body.style.display = "none";

// 显示body元素
body.style.display = "block";

Steuern Sie das Stylesheet

In der tatsächlichen Entwicklung bedienen wir jedoch selten direkt das Stilattribut des Elements. Stattdessen werden Stylesheets verwendet, um den Stil von Seitenelementen zu steuern. Daher kann das Anzeigen und Ausblenden des Körperelements auch durch Bedienen des Stylesheets gesteuert werden.

Im Head-Tag der HTML-Seite können Sie das folgende Stylesheet hinzufügen:

<style>
    body.hidden {
        display: none;
    }
</style>

Dieses Stylesheet definiert eine Klasse namens „hidden“, in der das Anzeigeattribut des Body-Elements auf „none“ gesetzt ist ist Das Körperelement kann ausgeblendet werden.

Jetzt können wir das Body-Element steuern, um die „versteckte“ Klasse über Javascript hinzuzufügen oder zu löschen. Zum Beispiel:

// 隐藏body元素
body.classList.add("hidden");

// 显示body元素
body.classList.remove("hidden");

Anwendungsbeispiel

Schauen wir uns abschließend noch ein vollständiges Anwendungsbeispiel an. Angenommen, wir haben eine Seite mit einer Schaltfläche darauf. Durch Klicken auf die Schaltfläche können Sie die Anzeige und das Ausblenden der Seite steuern. Wir können es implementieren, indem wir die folgenden Schritte ausführen:

Fügen Sie ein Stylesheet zum Head-Tag hinzu, definieren Sie eine Klasse mit dem Namen „hidden“ und setzen Sie das Anzeigeattribut des Body-Elements auf „none“.

<head>
    <style>
        body.hidden {
            display: none;
        }
    </style>
</head>

Fügen Sie der Seite eine Schaltfläche und ein Klickereignis hinzu.

<body>
    <button onclick="toggle()">显示/隐藏</button>
    <!-- 页面内容 -->
</body>

Definieren Sie die Umschaltfunktion in Javascript, die das Anzeigen und Ausblenden des Körperelements durch Bedienen des Stylesheets steuert.

function toggle() {
   var body = document.body;
   body.classList.toggle("hidden");
}

Wenn der Benutzer nun auf die Schaltfläche klickt, wird die Umschaltfunktion ausgelöst, die das Anzeigen und Ausblenden des Körperelements durch Bedienen des Stylesheets steuert.

Zusammenfassung

Anhand der obigen Beispiele können wir sehen, dass in JavaScript die Steuerung der Anzeige und Ausblendung des Body-Elements durch direktes Bedienen des Stilattributs des Elements oder durch Bedienen des Stylesheets erreicht werden kann. Für diejenigen, die eine flexiblere Kontrolle über den Seitenstil benötigen, wird empfohlen, ein Stylesheet zu verwenden, um den Stil von Elementen zu steuern.

Das obige ist der detaillierte Inhalt vonSo steuern Sie das Anzeigen und Ausblenden von Körpern mit Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html class 事件样式表 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 implementieren Sie Parameter variabler Länge in einer Javascript-FunktionNächster Artikel：So implementieren Sie Parameter variabler Länge in einer Javascript-Funktion

In Verbindung stehende Artikel

Mehr sehen