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

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

Susan Sarandon
Libérer: 2024-11-09 04:14:02
original
618 Les gens l'ont consulté

How to Modify CSS Pseudo-Element Styles with JavaScript Without

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);
}
Copier après la connexion

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"));
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal