Zusammenfassung der Methoden zur Interaktion mit JavaScript- und CSS-Javascript-Kenntnissen

Verwenden Sie JavaScript, um Pseudoelementattribute abzurufen

Jeder weiß, wie man den CSS-Stilwert eines Elements über sein Stilattribut erhält, aber kann man den Attributwert eines Pseudoelements erhalten? Ja, Sie können auch mit JavaScript auf Pseudoelemente auf der Seite zugreifen.

Code kopieren Der Code lautet wie folgt:

// Den Farbwert von .element:before
abrufen var color = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('color');
// Den Inhaltswert von .element:before
abrufen var content = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('content');

Sehen Sie, ich kann auf den Inhaltsattributwert im Pseudoelement zugreifen. Dies ist eine sehr nützliche Technik, wenn Sie eine dynamische, stilvolle Website erstellen möchten!

classList API

Viele JavaScript-Toolbibliotheken verfügen über Methoden wie addClass, removeClass und toggleClass. Um mit alten Browsern kompatibel zu sein, bestehen die von diesen Klassenbibliotheken verwendeten Methoden darin, zuerst den Klassennamen des Elements zu durchsuchen, die Klasse anzuhängen und zu löschen und dann den Klassennamen zu aktualisieren. Tatsächlich gibt es eine neue API namens classList:

, die Methoden zum Hinzufügen, Löschen und Umkehren von CSS-Klassenattributen bereitstellt

Code kopieren Der Code lautet wie folgt:

myDiv.classList.add('myCssClass'); // Fügt eine Klasse hinzu
myDiv.classList.remove('myCssClass'); // Entfernt eine Klasse
myDiv.classList.toggle('myCssClass'); // Schaltet eine Klasse um

ClassListAPI ist seit langem in den meisten Browsern implementiert und wurde schließlich in IE10 implementiert.

Stilregeln direkt zum Stylesheet hinzufügen und löschen

Wir sind alle sehr vertraut mit der Verwendung von element.style.propertyName zum Ändern von Stilen. Die Verwendung von JavaScript kann uns dabei helfen, aber wissen Sie, wie man eine vorhandene CSS-Stilregel hinzufügt oder ändert? Es ist eigentlich ganz einfach.

Code kopieren Der Code lautet wie folgt:

Funktion addCSSRule(Blatt, Selektor, Regeln, Index) {
if(sheet.insertRule) {
sheet.insertRule(selector „{“ Rules „}“, index);
}
sonst {
sheet.addRule(Selektor, Regeln, Index);
}
}
// Benutze es!
addCSSRule(document.styleSheets[0], "header", "float: left");

Diese Methode wird normalerweise zum Erstellen einer neuen Stilregel verwendet. Wenn Sie jedoch eine vorhandene Regel ändern möchten, können Sie dies auch tun.

CSS-Datei laden

Das verzögerte Laden von Bildern, JSON, Skripten usw. ist eine gute Möglichkeit, die Seitenanzeige zu beschleunigen. Wir können JavaScript-Loader wie curl.js verwenden, um diese externen Ressourcen träge zu laden. Aber wussten Sie, dass CSS-Stylesheets auch träge geladen werden können und die Rückruffunktion Sie benachrichtigt, nachdem der Ladevorgang erfolgreich war?

Code kopieren Der Code lautet wie folgt:

locken(
[
„namespace/MyWidget“,
„css!namespace/resources/MyWidget.css“
],
Funktion(MyWidget) {
// Sie können MyWidget
bedienen // Es gibt hier keinen Verweis auf diese CSS-Datei, da sie nicht benötigt wird;
// Wir müssen es nur auf die Seite
laden }
});

Das auf dieser Website verwendete PrismJS-Syntaxhervorhebungsskript ist verzögert geladen. Wenn alle Ressourcen geladen sind, wird die Rückruffunktion ausgelöst und ich kann sie in die Rückruffunktion laden. Sehr nützlich!

CSS-Mauszeigerereignisse

Die CSS-Pointer-Events-Eigenschaft funktioniert sehr ähnlich wie JavaScript. Wenn Sie diese Eigenschaft auf „none“ setzen, kann sie effektiv verhindern, dass das Element deaktiviert wird Tatsächlich werden alle JavaScript-Ereignisse oder Rückruffunktionen für dieses Element deaktiviert!

Code kopieren Der Code lautet wie folgt:

.disabled { pointer-events: none;

Klicken Sie auf dieses Element und Sie werden feststellen, dass alle Listener, die Sie auf diesem Element platzieren, keine Ereignisse auslösen. Eigentlich eine fantastische Funktion – Sie müssen nicht mehr prüfen, ob eine bestimmte CSS-Klasse existiert, um zu verhindern, dass ein Ereignis ausgelöst wird.

Die oben genannten 5 Möglichkeiten zur Interaktion mit JavaScript und CSS habe ich zusammengefasst. Wenn Sie bessere haben, teilen Sie uns dies bitte mit. Dieser Artikel wird weiterhin aktualisiert