Alors que les navigateurs continuent de mettre à niveau et de s'améliorer, les limites 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 à la technologie Front-end et ont besoin de travailler en étroite collaboration les uns avec les autres. Nos pages Web ont des fichiers .js et .css, 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 de travailler avec JavaScript et CSS dont vous voulez parler ci-dessous!
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:
<span style = "Font-Size: 18px;"> // 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 ('Content'); </span>
L'avez-vous vu? 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:
<span style = "Font-Size: 18px;"> MyDiv.classList.add ('mycssclass');
MyDiv.ClassList.Remove («mycssclass»);
MyDiv.classList.toggle («mycssclass»);
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 connaissons tous très bien l'utilisation de l'élément.style.propertyName pour modifier les styles. En fait très simple.
La copie de code est la suivante:
<span style = "Font-Size: 18px;"> Fonction AddcSrule (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");
</span>
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.
La copie de code est la suivante:
<span style = "Font-Size: 18px;"> curl (
[
"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
}
}); </pan>
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 de pointeur du pointeur CSS est très intéressant. , il est interdit à tous les événements JavaScript ou fonctions de rappel sur cet élément!
La copie de code est la suivante:
<span style = "Font-Size: 18px;">. Disabled {Pointer-Events: Aucun;} </span>
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é.
Il s'agit des 5 méthodes pour interagir avec CSS et JavaScript que vous n'avez peut-être pas encore découvert. Avez-vous de nouvelles découvertes? Partagez-le!