Erfahren Sie 5 Möglichkeiten zur Interaktion mit JavaScript und CSS

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

Verwendung von JavaScript zum Erhalten von Pseudoelement-Attributen (Pseudoelementattributen)

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!

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 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 .

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, 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.

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?

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 Event

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; }

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.

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

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!