Dieser Artikel führt Sie hauptsächlich in die spezifische Rolle des Klassenattributs des Eingabe-Tags ein. Es gibt Beispiele, die dies beweisen. Außerdem wird erläutert, wie das Klassenattribut und der Attributwert des Eingabe-Tags verwendet werden. Der letzte Punkt betrifft das Klassenattribut. Ein Beispiel für eine andere Verwendung.
Lassen Sie uns zunächst über die Rolle des Klassenattributs des Eingabe-Tags in HTML sprechen:
Das Klassenattribut des Eingabe-Tags wird zur Referenzierung verwendet Klassenstil Ihrer Seite.
Das heißt, Sie definieren zunächst einen Klassenstil im Tag und verweisen dann darauf.
So:
<style type="text/css">
.btn{
color:red;
}
</style>
<input type="button" class="btn" />Der Seiteneffekt wird nicht angezeigt. Die Textfarbe auf dieser Schaltfläche ist jedoch rot. Wenn Sie interessiert sind, können Sie es selbst ausprobieren.
Im Folgenden finden Sie eine Erläuterung zur Verwendung des Klassenattributs und des Attributwerts des spezifischen Eingabe-Tags:
Klassenname-Attribut. Das Klassenattribut im a-Tag wird zum Hinzufügen von Stilen verwendet. Zu den zugehörigen Konzepten gehören Klasse und Zuordnung, Klassenname und Klassenliste.
Im Allgemeinen kann auf alle Attribute über Objekt, Objekt[""] und Objekt.getAttribute("") zugegriffen werden. Da es sich bei „Klasse“ jedoch um ein für JavaScript reserviertes Wort handelt, wird es Klassenname <🎜 zugeordnet > für den Zugriff durch die oben genannten Lösungen. Daher unterstützen Standardbrowser zwei Zugriffsmethoden: a.classname und a["classname"].
Was a.getattribute("class") oder a.getattribute("classname") betrifft, hängt es davon ab, ob der Browser mit dieser Zugriffsmethode kompatibel ist. (Zu testen: Ersteres kann in Mozilla (Firefox) und Opera korrekt ausgeführt werden, kann jedoch nicht in IE und Safari verwendet werden. Letzteres kann in IE und Opera korrekt ausgeführt werden, kann jedoch nicht in Mozilla (Firefox) und Safari verwendet werden.) Aber die DOM-Level-2-Methode object.getattribute("") eignet sich gut zum Abrufen benutzerdefinierter Attribute in Tags, daher istclassList-Attribut ein konservativer Ansatz. Da der Wert des Klassenattributs mehrere Stilnamen enthalten kann, z. B. class = „top1 left“, muss dieser Zeichenfolgenwert häufig mit dem Klassennamen verknüpft werden, um die Zuordnung der Klasse abzuschließen. Bei der Verarbeitung des Klassenwerts scheint er jedoch sehr starr zu sein Attribut. Was ist zu tun? Die neue API-Klassenliste in HTML5 kann dieses Problem lösen.
classlist-Attribut ist eine weitere Verbesserung gegenüber classname. Genau wie das arguments-Attribut und das childnode-Attribut, das wir gesehen haben, kann es als Array-ähnliches Objekt verstanden werden. (Noch zu testen)
classlist bringt einige Operationsmethoden und Attribute: add(), remove(), toggle(), contains() usw. und Länge. Auf
kann mit a.classList oder a["classList"] zugegriffen werden. Es gibt immer noch Probleme mit der Browserkompatibilität mit a.getAttribute("classList"). Das Klassenattribut wird nicht nur in Eingabe-Tags verwendet, sondern hat auch andere Richtungen, wie zum Beispiel die folgende:Verwenden Sie das Klassenattribut in HTML-Dokumenten Beispiel:
<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph.</p>
</body>
</html>Hier ist der Kommentar:
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
