Pouvez-vous modifier les styles de pseudo-éléments CSS avec JavaScript ?

Modification des styles de pseudo-éléments CSS à l'aide de JavaScript

Est-il possible de modifier le style d'un pseudo-élément CSS via JavaScript ?

Considérez les exemple de définition dynamique de la couleur de la barre de défilement à l'aide de ce code :

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

Cependant, les navigateurs répondent avec l'erreur suivante : "Uncaught TypeError : Impossible de lire la propriété 'style' de null."

Cette tâche peut-elle être accomplie d'une manière différente ?

Dans les navigateurs Webkit, vous pouvez y parvenir en utilisant Vars CSS.

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

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

Pour manipuler cette valeur en JavaScript :

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

Pour d'autres exemples de gestion du CSS variables avec JavaScript, reportez-vous à la ressource suivante : https://eager.io/blog/communicating-between-javascript-and-css-with-css-variables/

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!