Comment styliser dynamiquement des pseudo-éléments CSS avec JavaScript ?

Style de pseudo-éléments CSS dynamique avec JavaScript

Est-il possible de modifier les styles de pseudo-éléments CSS à l'aide de JavaScript ? Par exemple, ajuster dynamiquement la couleur de la barre de défilement ou la masquer. Cependant, les tentatives visant à le faire avec ces scripts ont abouti à une erreur "TypeError : impossible de lire la propriété 'style' de null."

SOLUTION : introduction des variables CSS

Pendant L'interopérabilité entre navigateurs n'est peut-être pas une priorité, l'utilisation de variables CSS (CSS Vars) offre une solution efficace dans les navigateurs WebKit. Cette méthode permet de déclarer des variables en CSS et de les modifier dynamiquement à l'aide de JavaScript.

Dans votre CSS, définissez la couleur d'arrière-plan de la barre de défilement comme une variable :

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

Ensuite, stylisez le pouce de la barre de défilement en utilisant la variable :

#editor::-webkit-scrollbar-thumb:vertical {
  /* Fallback */
  background-color: #ccc;
  /* Dynamic value */
  background-color: var(--scrollbar-background);
}

En JavaScript, vous pouvez modifier la valeur de la variable sur l'élément #editor :

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

Cette approche vous permet de modifier dynamiquement la couleur de la barre de défilement sans accéder directement le style du pseudo-élément, évitant ainsi le problème "TypeError".

Pour d'autres exemples, reportez-vous à cette ressource sur la manipulation des variables CSS avec JavaScript : https://eager.io/blog/communicating-between-javascript -et-css-avec-variables-css/

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!