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:
// Erhalten Sie den Farbwert von .element: Vorher
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');
Hast du es gesehen? Ich kann im Pseudoelement auf den Wert des Inhaltsattributs zugreifen. 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, suchen 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:
mydiv.classlist.add ('mycssClass'); // fügt eine Klasse hinzu
mydiv.classlist.remove ('mycssclass'); // Entfernt eine Klasse
mydiv.classlist.toggle ('mycssclass'); // Umschaltet eine Klasse
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 Stile zu ändern. Wenn Sie JavaScript verwenden, können Sie dies tun, aber wissen Sie, wie Sie eine vorhandene CSS -Stilregel hinzufügen oder beheben können? Eigentlich sehr einfach.
Die Codekopie lautet wie folgt:
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");
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 das Laden dieser externen Ressourcen zu verzögern. Aber wissen Sie, dass CSS -Style -Blätter ebenfalls verzögert werden können, und die Rückruffunktion wird benachrichtigt, nachdem die Last erfolgreich ist.
Die Codekopie lautet wie folgt:
Locken (
[
"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
}
});
Das von dieser Website verwendete PrismJS -Syntax -Skript ist faul. 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-Mauszeiger-Ereignisses ist sehr interessant. Seine Wirksamkeit ist JavaScript sehr ähnlich. Wenn Sie dieses Attribut auf keine festlegen, kann es effektiv verhindern, dass das Element deaktiviert wird. Sie können sagen "na was?", Aber tatsächlich verbietet es JavaScript -Ereignisse oder Rückruffunktionen in diesem Element!
Die Codekopie lautet wie folgt:
.Dialabled {Pointer-Events: Keine; }
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.
Die oben genannten sind 5 Möglichkeiten, um mit JavaScript und CSS von mir zu interagieren. Wenn Sie bessere haben, sagen Sie es mir bitte. Dieser Artikel wird kontinuierlich aktualisiert.