Ausführliche Erläuterung der Verwendung des classList-Attributs von HTML5 zum Betreiben von CSS-Klassen-H5-Tutorial-php.cn

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

黄舟

Freigeben： 2017-10-16 11:13:23

Original

2510 Leute haben es durchsucht

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>

Nach dem Login kopieren

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");

Nach dem Login kopieren

Eine Klasse löschen

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

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

Nach dem Login kopieren

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);

Nach dem Login kopieren

Eins hinzufügen

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

Nach dem Login kopieren

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");

Nach dem Login kopieren

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!