Apprenez 5 façons d'interagir avec JavaScript et CSS

À mesure que les navigateurs continuent d'être mis à niveau et améliorés, les frontières entre CSS et JavaScript deviennent de plus en plus floues. À l’origine, ils étaient responsables de fonctions complètement différentes, mais en fin de compte, ils appartiennent tous à des technologies Web frontales et doivent travailler en étroite collaboration les uns avec les autres. Nous avons tous des fichiers .js et .css dans nos pages Web, mais cela ne signifie pas que CSS et js sont indépendants et ne peuvent pas interagir. Vous ne connaissez peut-être pas ces cinq façons dont JavaScript et CSS peuvent fonctionner ensemble !

Recommandations d'apprentissage associées : Tutoriel vidéo javascript

Utilisation de JavaScript pour obtenir des attributs de pseudo-élément (pseudo-élément)

Vous savez comment obtenir la valeur de style CSS d'un élément via son attribut style, mais pouvez-vous obtenir la valeur d'attribut d'un pseudo-élément ? Oui, vous pouvez également accéder aux pseudo-éléments de la page en utilisant JavaScript.

// 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');

Vous voyez, je peux accéder à la valeur de l'attribut content dans le pseudo-élément. C’est une technique très utile si vous souhaitez créer un site internet dynamique et stylé !

API classList

De nombreuses bibliothèques d'outils JavaScript ont des méthodes telles que addClass, removeClass et toggleClass. Afin d'être compatibles avec les anciens navigateurs, les méthodes utilisées par ces bibliothèques de classes consistent d'abord à rechercher className de l'élément, à ajouter et supprimer cette classe, puis à mettre à jour className. En fait, il existe une nouvelle API qui fournit des méthodes pour ajouter, supprimer et inverser les attributs de classe CSS, appelée classList :

myp.classList.add('myCssClass'); // Adds a class

myp.classList.remove('myCssClass'); // Removes a class

myp.classList.toggle('myCssClass'); // Toggles a class

La plupart des navigateurs ont implémenté l'classListAPI très tôt, et finalement dans IE10. .

Ajoutez et supprimez des règles de style directement dans la feuille de style

Nous sommes tous très familiers avec l'utilisation de element.style.propertyName pour modifier les styles. L'utilisation de JavaScript peut nous aider à le faire, mais vous savez comment ajouter. ou Corriger une règle de style CSS existante ? C'est en fait très simple.

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");

Cette méthode est généralement utilisée pour créer une nouvelle règle de style, mais vous pouvez également le faire si vous souhaitez modifier une règle existante.

Chargement de fichiers CSS

Le chargement paresseux d'images, de JSON, de scripts, etc. est un bon moyen d'accélérer l'affichage des pages. Nous pouvons utiliser des chargeurs JavaScript tels que curl.js pour charger paresseusement ces ressources externes. Mais saviez-vous que les feuilles de style CSS peuvent également être chargées paresseusement et que la fonction de rappel vous avertira une fois le chargement réussi.

curl(
	[
		"namespace/MyWidget",
		"css!namespace/resources/MyWidget.css"
	], 
	function(MyWidget) {
		// 你可以对MyWidget进行操作
		// 这里没有对这个CSS文件引用，因为不需要;
		// 我们只需要它已经加载到页面上了
	}
});

Le script de coloration syntaxique PrismJS utilisé sur ce site Web est chargé paresseux. Lorsque toutes les ressources sont chargées, la fonction de rappel se déclenche et je peux la charger dans la fonction de rappel. Très utile ! La propriété

CSS Mouse Pointer Event

CSS Mouse Pointer Eventpointer-events est très intéressante. Elle fonctionne un peu comme JavaScript. Lorsque vous définissez cette propriété sur none, cela fonctionne. désactive cet élément, et vous pourriez dire « et alors ? », mais en fait, il désactive tous les événements JavaScript ou rappels sur cet élément !

.disabled { pointer-events: none; }

Cliquez sur cet élément et vous constaterez que les écouteurs que vous placez sur cet élément ne déclencheront aucun événement. Une fonctionnalité fantastique, vraiment : vous n'avez plus besoin de vérifier si une certaine classe CSS existe pour empêcher le déclenchement d'un événement.

Voici 5 façons d'interagir avec CSS et JavaScript que vous n'avez peut-être pas encore découvertes. Avez-vous de nouvelles découvertes ? Partagez-le!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!