Changer les styles des pseudo-éléments CSS via JavaScript

Question

Est-il possible de changer un style de pseudo-élément CSS via JavaScript?

Par exemple, je veux définir dynamiquement la couleur de la barre de défilement comme ceci:

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

et je veux également pouvoir dire à la barre de défilement de se cacher comme ceci:

document.querySelector("#editor::-webkit-scrollbar").style.visibility = "hidden";

Cependant, ces deux scripts renvoient:

Uncaught TypeError: Impossible de lire la propriété 'style' de null

Y a-t-il une autre manière de procéder?
L'interopérabilité entre navigateurs n'est pas importante, je veux juste que cela fonctionne dans les navigateurs Webkit.

Answer 1

J'ai posté une question similaire à, mais pas tout à fait comme, cette question.

J'ai trouvé un moyen de récupérer et de changer les styles pour des pseudo-éléments et j'ai demandé ce que les gens pensaient de la méthode.

Ma question est à Récupérer ou changer les règles CSS pour les pseudo-éléments

En gros, vous pouvez obtenir un style avec une déclaration telle que:

document.styleSheets[0].cssRules[0].style.backgroundColor

Et en changer un avec:

document.styleSheets[0].cssRules[0].style.backgroundColor = nouvelleCouleur;

Vous devez bien sûr changer l'index de la feuille de style et des cssRules. Lisez ma question et les commentaires qu'elle a suscités.

J'ai constaté que cela fonctionne également pour les pseudo-éléments ainsi que pour les éléments/styles "réguliers".

Answer 2

Une vieille question, mais une que j'ai rencontrée en essayant de changer dynamiquement la couleur du contenu du sélecteur :before d'un élément.

La solution la plus simple à laquelle je peux penser est d'utiliser des variables CSS, une solution non applicable au moment où la question a été posée :

"#editor::-webkit-scrollbar-thumb:vertical {
    background: --editorScrollbarClr
}

Changer la valeur en JavaScript :

document.body.style.setProperty(
    '--editorScrollbarClr', 
     localStorage.getItem("Color")
);

La même chose peut être faite pour d'autres propriétés.

Answer 3

On dirait que querySelector ne fonctionnera pas avec les pseudo-classes/pseudo-éléments, du moins pas avec ceux-là. La seule chose à laquelle je peux penser est d'ajouter dynamiquement une feuille de style (ou de modifier une existante) pour faire ce dont vous avez besoin.

Beaucoup d'exemples intéressants ici: Comment charger des règles css dynamiquement dans Webkit (Safari/Chrome) ?