5 Möglichkeiten zur Interaktion mit JavaScript und CSS, die Sie möglicherweise nicht kennen: Javascript-Kenntnisse

Da Browser ständig aktualisiert und verbessert werden, verschwimmen die Grenzen zwischen CSS und JavaScript zunehmend. Ursprünglich waren sie für völlig unterschiedliche Funktionen verantwortlich, aber am Ende gehören sie alle zu Web-Frontend-Technologien und müssen eng miteinander zusammenarbeiten. Wir alle haben .js-Dateien und .css-Dateien auf unseren Webseiten, aber das bedeutet nicht, dass CSS und js unabhängig sind und nicht interagieren können. Möglicherweise sind Ihnen diese fünf Möglichkeiten, wie JavaScript und CSS zusammenarbeiten können, nicht bekannt!

Verwenden Sie JavaScript, um das Pseudoelement-Attribut (Pseudoelement) abzurufen

Jeder weiß, wie man den CSS-Stilwert eines Elements über sein Stilattribut erhält, aber Sie können das Pseudoelement abrufen Element (Pseudoelement) Lohnt sich die Immobilie? 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
var color = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue abrufen ('color ');

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

Sehen Sie, ich kann auf den Inhaltseigenschaftswert 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 Code wie folgt:

myDiv.classList.add('myCssClass'); // Fügt eine Klasse
myDiv.classList hinzu .remove('myCssClass'); // Entfernt eine Klasse
myDiv.classList.toggle('myCssClass'); // Schaltet eine Klasse um Es wurde lange Zeit implementiert und 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 Sie wissen, wie Soll eine neue CSS-Stilregel hinzugefügt oder geändert werden? Es ist eigentlich ganz einfach.

Code kopieren Der Code lautet wie folgt: function addCSSRule(sheet, selector, Rules, index) {

if(sheet.insertRule) {

sheet.insertRule(selector "{" Rules "}", index);
}
else {
sheet.addRule(selector, Rules, Index);
}
// Verwenden Sie es! ", " 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 tun Tun Sie dies auch.

CSS-Dateien 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: curl( [ "namespace/MyWidget",

"css!namespace/resources/MyWidget.css"

],
function(MyWidget) {
// Sie können MyWidget bedienen
// Es gibt hier keinen Verweis auf diese CSS-Datei, da sie nicht benötigt wird
// Wir müssen sie nur auf die Seite geladen haben
}
});< /span>


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

CSS-Mauszeigerereignisse Die Eigenschaft „pointer-events“ ist sehr ähnlich zu JavaScript. Wenn Sie diese Eigenschaft auf „none“ setzen, kann sie das Deaktivieren effektiv verhindern Wenn Sie dieses Element verwenden, sagen Sie vielleicht „Na und?“, aber 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 } 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.

Dies sind 5 Möglichkeiten zur Interaktion mit CSS und JavaScript, die Sie vielleicht noch nicht entdeckt haben. Haben Sie neue Erkenntnisse? Teilt es!