JavaScript peut-il modifier dynamiquement les styles de pseudo-éléments CSS ?

Modification des styles de pseudo-éléments CSS avec JavaScript : un examen plus approfondi

Est-il possible de modifier dynamiquement le style des pseudo-éléments CSS via Javascript ? Supposons que nous souhaitions définir la couleur de la barre de défilement et la masquer complètement. Cependant, l'utilisation de scripts comme celui-ci renvoie une erreur « Impossible de lire la propriété 'style' de null » :

document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color");
document.querySelector("#editor::-webkit-scrollbar").style.visibility = "hidden";

Explorons une approche alternative qui fonctionne efficacement dans les navigateurs Webkit et permet une dégradation gracieuse dans d'autres.

Utilisation des variables CSS pour le style

Les navigateurs modernes proposent des variables CSS (CSS Vars), qui offrent un moyen puissant de définir et de manipuler des propriétés CSS personnalisées à partir de JavaScript. En utilisant des variables CSS, vous pouvez obtenir les effets de style souhaités tout en conservant la compatibilité entre navigateurs.

Dans votre CSS, définissez la variable CSS --scrollbar-background et appliquez-la au pouce de la barre de défilement :

#editor {
  --scrollbar-background: #ccc;
}

#editor::-webkit-scrollbar-thumb:vertical {
  background-color: #ccc;
  background-color: var(--scrollbar-background);
}

Maintenant, dans votre JavaScript, modifiez la propriété --scrollbar-background sur le #editor element :

document.getElementById("#editor").style.setProperty('--scrollbar-background', localStorage.getItem("Color"));

En utilisant CSS Vars en conjonction avec JavaScript, vous pouvez facilement modifier les styles de pseudo-éléments et garantir la compatibilité avec un large éventail de navigateurs Web.

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!