Résumé des méthodes d'interaction avec les compétences JavaScript et CSS_javascript

Utilisez JavaScript pour obtenir les attributs des pseudo-éléments

Tout le monde sait comment obtenir la valeur de style CSS d'un élément via son attribut de style, mais peut-on 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.

Copier le code Le code est le suivant :

// Récupère la valeur de couleur de .element:before
var couleur = 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');

Vous voyez, je peux accéder à la valeur de l'attribut 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 Le code est le suivant :

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

ClassListAPI est implémenté dans la plupart des navigateurs depuis longtemps, et il a finalement été implémenté dans IE10.

Ajouter et supprimer 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 savez-vous comment 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) {
si (feuille.insertRule) {
sheet.insertRule(sélecteur "{" règles "}", index);
>
sinon {
sheet.addRule(sélecteur, règles, 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 également le faire.

Charger le fichier 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 :

boucler(
[
"espace de noms/MonWidget",
"css!namespace/resources/MonWidget.css"
],
fonction (MonWidget) {
// Vous pouvez utiliser 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 soit chargé sur la page
>
});

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 !

Événements du pointeur de souris CSS

La propriété CSS pointer-events est très intéressante. Elle fonctionne un peu comme JavaScript. Lorsque vous définissez cette propriété sur none, elle peut effectivement empêcher la désactivation de l'élément. Vous pouvez dire : "Et alors ?" 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 { événements de pointeur : aucun }

Cliquez sur cet élément et vous constaterez que les auditeurs 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 les 5 façons d'interagir avec JavaScript et CSS que j'ai résumées. Si vous en avez de meilleures, veuillez nous le faire savoir. Cet article continuera à être mis à jour.