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 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!
Verwandte Lernempfehlungen: Javascript-Video-Tutorial
Jeder weiß, wie man den CSS-Stilwert eines Elements über sein style-Attribut erhält, aber können Sie den Attributwert eines Pseudoelements ermitteln? Ja, Sie können auch mit JavaScript auf Pseudoelemente in der Seite zugreifen.
// Get the color value of .element:before var color = window.getComputedStyle( document.querySelector('.element'), ':before' ).getPropertyValue('color'); // Get the content value of .element:before var content = window.getComputedStyle( document.querySelector('.element'), ':before' ).getPropertyValue('content');
Sehen Sie, ich kann auf den Wert des content-Attributs im Pseudoelement zugreifen. Dies ist eine sehr nützliche Technik, wenn Sie eine dynamische, stilvolle Website erstellen möchten!
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 nach className des Elements zu suchen, diese Klasse anzuhängen und zu löschen und dann className zu aktualisieren. Tatsächlich gibt es eine neue API mit dem Namen classList, die Methoden zum Hinzufügen, Löschen und Invertieren von CSS-Klassenattributen bereitstellt:
myp.classList.add('myCssClass'); // Adds a class myp.classList.remove('myCssClass'); // Removes a class myp.classList.toggle('myCssClass'); // Toggles a class
Die meisten Browser haben die classListAPI sehr früh implementiert und schließlich in IE10 auch erreicht .
Wir sind alle sehr vertraut mit der Verwendung von element.style.propertyName zum Ändern von Stilen, aber Sie wissen, wie man Stile hinzufügt oder eine bestehende CSS-Stilregel reparieren? Es ist eigentlich ganz einfach.
function addCSSRule(sheet, selector, rules, index) {
if(sheet.insertRule) {
sheet.insertRule(selector + "{" + rules + "}", index);
}
else {
sheet.addRule(selector, rules, index);
}
}
// Use it!
addCSSRule(document.styleSheets[0], "header", "float: left");Diese Methode wird normalerweise zum Erstellen einer neuen Stilregel verwendet, Sie können dies jedoch auch tun, wenn Sie eine bestehende Regel ändern möchten.
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?
curl(
[
"namespace/MyWidget",
"css!namespace/resources/MyWidget.css"
],
function(MyWidget) {
// 你可以对MyWidget进行操作
// 这里没有对这个CSS文件引用，因为不需要;
// 我们只需要它已经加载到页面上了
}
});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! Die Eigenschaft
CSS Mouse Pointer Eventpointer-events funktioniert sehr ähnlich wie JavaScript deaktiviert dieses Element, und Sie sagen vielleicht „Na und?“, aber tatsächlich werden alle JavaScript-Ereignisse oder Rückrufe für dieses Element deaktiviert! none
.disabled { pointer-events: none; }Das obige ist der detaillierte Inhalt vonErfahren Sie 5 Möglichkeiten zur Interaktion mit JavaScript und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
