Utilisez JavaScript pour obtenir des attributs de pseudo-éléments
Tout le monde sait comment obtenir sa valeur de style CSS via l'attribut de style d'un élément, mais peut-il obtenir la valeur d'attribut d'un pseudo-élément? Oui, vous pouvez également accéder aux pseudo-éléments dans la page à l'aide de JavaScript.
La copie de code est la suivante:
// Obtenez la valeur de couleur de .Element: avant
var color = window.getCompuledStyle (
document.QuerySelector ('. Element'), ': avant'
) .getPropertyValue ('Color');
// Obtenez la valeur de contenu de .Element: avant
var contenu = window.getCompuledStyle (
document.QuerySelector ('. Element'), ': avant'
) .getProperTyValue («Contenu»);
L'avez-vous vu? Je peux accéder à la valeur d'attribut de contenu dans le pseudo-élément. Si vous souhaitez créer un site Web dynamique et chic, c'est une technique très utile!
API de liste de classe
De nombreuses bibliothèques d'outils JavaScript ont AddClass, RemoveClass et ToggleClass. Afin d'être compatible avec les anciens navigateurs, ces bibliothèques de classe utilisent des méthodes pour rechercher le nom de classe de l'élément, ajouter et supprimer cette 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és classlist:
La copie de code est la suivante:
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 implémentent l'API classlist très tôt, et enfin IE10 l'a également implémenté.
Ajouter directement et supprimer les règles de style aux feuilles de style
Nous sommes tous très familiers avec l'utilisation d'élément.style.propertyName pour modifier les styles. L'utilisation de JavaScript peut nous aider à le faire, mais savez-vous comment ajouter ou réparer une règle de style CSS existante? En fait très simple.
La copie de code est la suivante:
fonction addcssrule (feuille, sélecteur, règles, index) {
if (sheet.insertrule) {
sheet.insertrule (sélecteur + "{" + règles + "}", index);
}
autre {
sheet.addrule (sélecteur, règles, index);
}
}
// Utilisez-le!
addcSSrule (document.stylesheets [0], "En-tête", "float: gauche");
Cette méthode est généralement utilisée pour créer une nouvelle règle de style, mais vous pouvez le faire si vous souhaitez modifier une règle existante.
Chargement des fichiers CSS
Le chargement paresseux des images, JSON, scripts, etc. est un bon moyen d'accélérer l'affichage de la page. Nous pouvons utiliser Curl.js et d'autres chargeurs JavaScript pour retarder le chargement de ces ressources externes. Mais savez-vous que les feuilles de style CSS peuvent également être retardées de chargement, et la fonction de rappel sera informée après le succès de la charge.
La copie de code est la suivante:
boucle(
[
"Espace de noms / MyWidget",
"CSS! Espace de noms / ressources / myWidget.css"
],
fonction (myWidget) {
// Vous pouvez opérer sur myWidget
// Il n'y a aucune référence à ce fichier CSS ici car il n'est pas nécessaire;
// Nous avons juste besoin qu'il soit chargé sur la page
}
});
Le script de mise en évidence de la syntaxe PrismJS utilisé par ce site Web est un chargement paresseux. Lorsque toutes les ressources sont chargées, la fonction de rappel sera déclenchée et je peux le charger dans la fonction de rappel. Très utile!
Événement de pointeur de souris CSS
L'attribut Pointer-Events de l'événement de pointeur de souris CSS est très intéressant. Son efficacité est très similaire à JavaScript. Lorsque vous définissez cet attribut à aucun, il peut effectivement empêcher l'élément d'être désactivé. Vous pouvez dire "alors quoi?", Mais en fait, cela interdit les événements JavaScript ou les fonctions de rappel sur cet élément!
La copie de code est la suivante:
.Disabled {Pointer-Events: Aucun; }
Cliquez sur cet élément et vous constaterez qu'aucun événement ne sera déclenché par un écouteur que vous avez placé sur cet élément. Une fonctionnalité magique, vraiment - vous n'avez pas besoin de vérifier si une certaine classe CSS existe afin d'empêcher un événement d'être déclenché.
Ce qui précède est 5 façons d'interagir avec JavaScript et CSS par moi. Si vous en avez de meilleurs, dites-moi. Cet article sera mis à jour en continu.