5 façons d'interagir avec JavaScript et CSS que vous ne connaissez peut-être pas_javascript skills

À mesure que les navigateurs continuent de se mettre à niveau et de s'améliorer, 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 !

Utilisez JavaScript pour obtenir l'attribut pseudo-élément (pseudo-élément)

Tout le monde sait comment obtenir la valeur de style CSS d'un élément via son attribut de style, mais vous pouvez obtenir le pseudo-élément élément (pseudo-élément) La propriété en vaut-elle la peine ? Oui, vous pouvez également accéder aux pseudo-éléments de la page en utilisant JavaScript.

Copier le code Le code est le suivant :

// Obtenez la valeur de couleur de .element:before
var color = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue ('color ');

// Récupère la valeur du contenu de .element:before
var content = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('content');

Voir, je peux accéder à la valeur de la propriété de contenu 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 compatible avec les anciens navigateurs, les méthodes utilisées par ces bibliothèques de classes consistent d'abord à rechercher le nom de classe de l'élément, à ajouter et à supprimer la classe, puis à mettre à jour le nom de classe. 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 :

Copier le code Codez comme suit :

myDiv.classList.add('myCssClass'); // Ajoute une classe
myDiv.classList .remove ('myCssClass'); // Supprime une classe
myDiv.classList.toggle('myCssClass'); // Bascule une classe

La plupart des navigateurs classListAPI ont été implémenté depuis longtemps, et il a finalement été implémenté 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. faire nouveau Ajouter ou modifier une règle de style CSS existante ? C'est en fait très simple.

Copier le code Le code est le suivant :

function addCSSRule(feuille, sélecteur, règles, index) {
if(sheet.insertRule) {
sheet.insertRule(sélecteur "{" règles "}", index);
}
else {
sheet.addRule(selector, Rules, index);
}
}
// Utilisez-le !
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 si vous souhaitez modifier une règle existante, vous pouvez Faites également ceci.

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.

Copier le code Le code est le suivant :

curl(
[
"namespace/MonWidget",
"css!namespace/resources/MonWidget.css"
],
fonction(MonWidget) {
// Vous pouvez faire fonctionner MyWidget
// Il n'y a aucune référence à ce fichier CSS ici car il n'est pas nécessaire
// Il faut juste qu'il ait été chargé sur la page
}
});< /span>

Lorsque toutes les ressources sont chargées, la fonction de rappel sera déclenchée et je pourrai la charger dans la fonction de rappel. Très utile !

Événements de pointeur de souris CSS

Événements de pointeur de souris CSS La propriété pointer-events est très intéressante. Sa fonction est très similaire à JavaScript. Lorsque vous définissez cette propriété sur aucun, elle peut efficacement empêcher la désactivation. cet élément, vous pourriez dire "et alors ?", mais en fait, cela désactive tous les événements JavaScript ou fonctions de rappel sur cet élément !

Copier le code Le code est le suivant :

.disabled { pointer-events: none; }

Cliquez sur cet élément, vous 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!