HTML-Inhalt ausgeblendet

Ausblenden von HTML-Inhalten: CSS-Anzeigeattribut und JavaScript-Klassenlistenattribut

Das Ausblenden von Inhalten in HTML kann durch verschiedene Technologien erreicht werden, einschließlich der Verwendung von CSS-Anzeigeattributen, Sichtbarkeitsattributen und Deckkraftattributen sowie der Verwendung von JavaScripts classList-Attribut und style-Attribut usw. In diesem Artikel stellen wir vor, wie Sie das Anzeigeattribut von CSS und das ClassList-Attribut von JavaScript verwenden, um den Inhalt von HTML auszublenden.

1. Verwenden Sie das Anzeigeattribut von CSS, um HTML-Inhalte auszublenden.

Das Anzeigeattribut von CSS kann steuern, wie ein Element auf der Seite angezeigt wird. Zu den häufig verwendeten Anzeigeattributwerten gehören Block, Inline, Inline-Block, Tabelle, Keine usw. Unter diesen bedeutet der Wert „Keine“, dass das Element vollständig von der Seite entfernt wird, dh keinen Platz auf der Seite einnimmt.

Das Folgende ist ein Beispiel für die Verwendung des Anzeigeattributs von CSS zum Ausblenden von Inhalten:

<div id="myDiv">这是一个要隐藏的文本。</div>

Wickeln Sie den auszublendenden Text in ein div-Element ein und legen Sie das CSS-Attribut dafür fest div-Element: # 🎜🎜#

#myDiv {
    display: none;
}

Auf diese Weise wird der Text ausgeblendet und nicht mehr auf der Seite angezeigt.

Es ist zu beachten, dass bei Verwendung des display:none-Attributs zum Ausblenden eines HTML-Elements das Element vollständig entfernt wird und keinen Platz auf der Seite einnimmt. Wenn Sie ein Element ausblenden müssen, aber dennoch Platz beanspruchen, können Sie das Attribut „visibility:hidden“ oder das Attribut „opacity:0“ verwenden.

2. Verwenden Sie das classList-Attribut von JavaScript, um HTML-Inhalte auszublenden.

JavaScript kann HTML-Elemente durch DOM-Operationen ausblenden. Unter anderem kann das Attribut classList verwendet werden, um das Klassenattribut des Elements abzurufen oder zu ändern. Das Klassenattribut ist eine Zeichenfolge, die einen oder mehrere durch Leerzeichen getrennte Klassennamen enthält. Verwenden Sie das Attribut classList, um Klassennamen für Elemente einfach hinzuzufügen, zu löschen und zu ändern.

Das Folgende ist ein Beispiel für die Verwendung des classList-Attributs von JavaScript zum Ausblenden von HTML-Inhalten:

<div id="myDiv">这是一个要隐藏的文本。</div>

Umschließen Sie den Text, der ausgeblendet werden soll, in einem div-Element und fügen Sie ein neues div-Element hinzu das div-Element. CSS-Klassenname ausgeblendet:

#myDiv {
    display: block;
}
.hidden {
    display: none;
}

var myDiv = document.getElementById("myDiv");
myDiv.classList.add("hidden");

Auf diese Weise wird der Text ausgeblendet und nicht mehr auf der Seite angezeigt. Wenn Sie den Text erneut anzeigen müssen, müssen Sie nur den CSS-Klassennamen des Elements in einen Klassennamen ändern, der nicht „hidden“ enthält, wie unten gezeigt:

myDiv.classList.remove("hidden");

Auf diese Weise wird das Element angezeigt Der Wert des Anzeigeattributs wird auf den Standardwert zurückgesetzt (wenn er nicht zuvor festgelegt wurde, ist er blockiert).

3. Fazit

Das Ausblenden von HTML-Inhalten ist eine häufig verwendete Technologie in der Webentwicklung. In diesem Artikel wird die Verwendung des CSS-Anzeigeattributs und des JavaScript-Klassenlistenattributs zum Ausblenden von HTML-Inhalten vorgestellt. Das Anzeigeattribut von CSS kann Elemente problemlos ausblenden. Es ist jedoch zu beachten, dass ausgeblendete Elemente vollständig entfernt werden, während das ClassList-Attribut von JavaScript Elemente dynamisch ausblenden und anzeigen kann, was flexibler ist. In praktischen Anwendungen können je nach tatsächlicher Situation unterschiedliche Technologien gewählt werden.

Das obige ist der detaillierte Inhalt vonHTML-Inhalt ausgeblendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!