Während die Browser weiter upgraden und sich verbessern, werden die Grenzen zwischen CSS und JavaScript zunehmend verschwommen. Ursprünglich waren sie für völlig unterschiedliche Funktionen verantwortlich, aber am Ende gehören sie alle zur Web-Front-End-Technologie und müssen eng miteinander zusammenarbeiten. Unsere Webseiten haben .JS- und .css -Dateien, aber dies bedeutet nicht, dass CSS und JS unabhängig sind und nicht interagieren können. Möglicherweise kennen Sie diese fünf Möglichkeiten, mit JavaScript und CSS zusammenzuarbeiten, über die Sie unten sprechen möchten!
Verwenden Sie JavaScript, um Pseudoelementattribute zu erhalten
Jeder weiß, wie man seinen CSS-Stilwert durch das Stilattribut eines Elements erhält, aber kann es den Attributwert eines Pseudoelements erhalten? Ja, Sie können auch mit JavaScript auf Pseudoelemente auf der Seite zugreifen.
Die Codekopie lautet wie folgt:
<span style = "Schriftgröße: 18px;"> // Erhalten Sie den Farbwert von .Element: Bevor
var color = window.getComputedStyle (
Document.querySelector ('. Element'), ': vor'
) .GetPropertyValue ('Farbe');
// Erhalten Sie den Inhaltswert von .Element: Vorher
var content = window.getComputedStyle (
Document.querySelector ('. Element'), ': vor'
) .GetPropertyValue ('Inhalt'); </span>
Haben Sie es gesehen? Wenn Sie eine dynamische, schicke Website erstellen möchten, ist dies eine sehr nützliche Technik!
Classlist -API
Viele JavaScript -Tools -Bibliothek verfügen über AddClass, Removeclass und ToggleClass. Um mit alten Browsern kompatibel zu sein, verwenden diese Klassenbibliotheken Methoden, um nach dem Klassennamen des Elements zu suchen, diese Klasse anzuhängen und zu löschen und dann den Klassennamen zu aktualisieren. Tatsächlich gibt es eine neue API, die Methoden zum Hinzufügen, Löschen und Invertieren von CSS -Klassenattributen bietet, die als ClassList bezeichnet werden:
Die Codekopie lautet wie folgt:
<span style = "Schriftgröße: 18px;"> mydiv.classlist.add ('mycssClass');
mydiv.classlist.remove ('mycssclass');
mydiv.classlist.toggle ('mycssclass');
Die meisten Browser implementieren die Classlist -API sehr früh und schließlich implementierten IE10 sie ebenfalls.
Fügen Sie Style -Regeln direkt zu Stilblättern hinzu und löschen Sie sie
Wir sind alle sehr vertraut mit der Verwendung von Element.Style.PropertyName, um die Stile zu ändern. Eigentlich sehr einfach.
Die Codekopie lautet wie folgt:
<span style = "Schriftgröße: 18px;"> Funktion addcsssrule (Blatt, Selektor, Regeln, Index) {
if (Sheet.inSertrule) {
Sheet.inSertrule (Selector + "{" + Regeln + "}", Index);
}
anders {
Sheet.Addrux (Selector, Regeln, Index);
}
}
// benutze es!
addcssSrule (Dokument.Stylesheets [0], "Header", "Float: Left");
</span>
Diese Methode wird normalerweise verwendet, um eine neue Stilregel zu erstellen, aber Sie können dies tun, wenn Sie eine vorhandene Regel ändern möchten.
Laden von CSS -Dateien
Lazy Laden von Bildern, JSON, Skripten usw. ist eine gute Möglichkeit, die Seitenanzeige zu beschleunigen. Wir können Curl.js und andere JavaScript -Lader verwenden, um diese externen Ressourcen zu verzögern.
Die Codekopie lautet wie folgt:
<span style = "Schriftgröße: 18px;"> curl (
[
"Namespace/MyWidget",
"CSS! Namespace/Ressourcen/MyWidget.css"
],
Funktion (MyWidget) {
// Sie können mit MyWidget arbeiten
// Es gibt keinen Hinweis auf diese CSS -Datei hier, da sie nicht erforderlich ist.
// Wir müssen nur auf der Seite geladen werden
}
}); </span>
Wenn alle Ressourcen geladen werden, wird die Rückruffunktion ausgelöst und ich kann sie in die Rückruffunktion laden. Sehr nützlich!
CSS -Mauszeigerereignis
Das Zeiger-Events-Attribut des CSS-Mauszeigers ist sehr interessant Es ist von JavaScript -Ereignissen oder Rückruffunktionen in diesem Element verboten!
Die Codekopie lautet wie folgt:
<span style = "Schriftgröße: 18px;"> Deaktiviert {Pointer-Events: Keine;} </span>
Klicken Sie auf dieses Element und Sie werden feststellen, dass kein Ereignis von jedem Listener ausgelöst wird, den Sie in diesem Element platziert haben. Wirklich eine magische Funktion - Sie müssen nicht überprüfen, ob eine bestimmte CSS -Klasse vorhanden ist, um zu verhindern, dass ein Ereignis ausgelöst wird.
Dies sind die 5 Methoden, um mit CSS und JavaScript zu interagieren, die Sie möglicherweise noch nicht entdeckt haben. Haben Sie neue Entdeckungen? Teilt es!