Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der Verwendung des classList-Attributs von HTML5 zum Betreiben von CSS-Klassen

Ausführliche Erläuterung der Verwendung des classList-Attributs von HTML5 zum Betreiben von CSS-Klassen

黄舟Original: 2017-10-16 11:13:232480Durchsuche

In diesem Artikel wird hauptsächlich die detaillierte Erklärung der Verwendung des classList-Attributs von HTML5 zum Betreiben von CSS-Klassen vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Editor und werfen wir einen Blick darauf.

Vorwort

In der Vergangenheit mussten wir einige Methoden von js oder jquery, hasClass, addClass und removeClass verwenden. Das Hinzufügen oder Löschen bestimmter Klassen im Klassenattribut eines Elements kann den Anforderungen bestimmter Stiländerungen gerecht werden, ist jedoch immer noch etwas mühsam.
Die neue Klassenliste in h5 ermöglicht es uns, die Klassennamen von Elementen bequemer zu bearbeiten.

Hinweis

classList weist eine schlechte Kompatibilität auf und ist nicht mit IE-Browsern unter IE10 kompatibel.

Beispiel

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>classList</title>
    <style>
        .mystyle {
            width: 300px;
            height: 50px;
            background-color: red;
            color: white;
            font-size: 25px;
        }
    </style>
</head>
<body>

<p>点击按钮为p元素添加 "mystyle" 类。</p>
<button onclick="myFunction()">点我</button>
<p id="myp">
    我是一个 p 元素。
</p>
<script>
    function myFunction() {
        document.getElementById("myp").classList.add("mystyle");
    }
</script>

</body>
</html>

Neue Klasse hinzufügen

Verwenden Mit der Add-Methode können Sie dem Seitenelement eine oder mehrere Klassen hinzufügen:

document.getElementById("myp").classList.add("mystyle");

Eine Klasse löschen

Mit der Remove-Methode können Sie eine einzelne CSS-Klasse entfernen:

document.getElementById("myp").classList.remove("mystyle");

Schaltet den Klassennamen innerhalb des Elements um

Klassennamen im Element ändern. Verwenden Sie die Toggle-Methode, Syntax: toggle(class, true|false)

Der erste Parameter ist der Klassenname, der aus dem Element entfernt werden soll, und gibt false zurück.

Wenn der Klassenname nicht existiert, wird der Klassenname dem Element hinzugefügt und gibt true zurück.

Der zweite ist ein optionaler Parameter, der einen booleschen Wert festlegt, um festzulegen, ob das Element gezwungen wird, eine Klasse hinzuzufügen oder zu entfernen, unabhängig davon, ob der Klassenname vorhanden ist. Zum Beispiel:

Eins entfernen

document.getElementById("myp").classList.toggle("classToRemove", false);

Eins hinzufügen

 document.getElementById("myp").classList.toggle("classToAdd", true);

Hinweis : Internet Explorer oder Opera 12 und frühere Versionen unterstützen den zweiten Parameter nicht

Überprüfen Sie, ob eine bestimmte Klasse enthalten ist

Verwenden Sie die Methode „enthält“, um zu bestimmen, ob eine bestimmte Klasse enthalten ist Ist enthalten, existiert, gibt einen booleschen Wert zurück.

 //returns true or false
 document.getElementById("myp").classList.contains("myp");

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung des classList-Attributs von HTML5 zum Betreiben von CSS-Klassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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 lösen Sie Probleme mit dem Stil der BildlaufleisteNächster Artikel：So lösen Sie Probleme mit dem Stil der Bildlaufleiste

In Verbindung stehende Artikel

Mehr sehen