Comment modifier les styles de pseudo-éléments CSS avec JavaScript sans « Uncaught TypeError : impossible de lire la propriété « style » de null » ?

Modification des styles de pseudo-éléments CSS avec JavaScript

Lorsque vous essayez d'ajuster la couleur et la visibilité de la barre de défilement à l'aide de JavaScript, il est courant de rencontrer l'erreur "Uncaught TypeError: Impossible de lire la propriété 'style' de null". Cela se produit parce que les sites Web ont désactivé le défilement par défaut, ce qui empêche les éléments de la barre de défilement d'exister.

Pour contourner cette limitation, vous pouvez utiliser la technique CSS Vars. Cette méthode consiste à définir des valeurs de secours dans votre CSS et à les manipuler dynamiquement à l'aide de variables CSS en JavaScript.

Dans votre CSS, définissez les styles de barre de défilement avec des valeurs de secours comme suit :

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

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

Ensuite, dans votre JavaScript, modifiez la variable qui contrôle la couleur d'arrière-plan de la barre de défilement :

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

Cette approche permet une modification dynamique des styles de barre de défilement sans rencontrer de "null" erreurs. Gardez à l'esprit que cette technique peut ne pas être prise en charge dans tous les navigateurs, envisagez donc une dégradation progressive pour les navigateurs plus anciens.

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!