Comment pouvez-vous manipuler dynamiquement des pseudo-éléments CSS avec JavaScript ?

Manipulation des pseudo-éléments CSS avec JavaScript

La modification dynamique des styles de pseudo-éléments CSS à l'aide de JavaScript peut être obtenue en employant diverses techniques, notamment CSS variables et propriétés spécifiques au fournisseur.

Variables CSS

Pour les navigateurs Webkit, une solution simple et compatible avec tous les navigateurs pour manipuler les pseudo-éléments est les variables CSS. Ces variables vous permettent de définir des styles en CSS et d'y accéder et de les modifier en JavaScript. Pour appliquer cette méthode :

• Définissez une variable CSS dans la feuille de style, telle que :

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

• Dans le style pseudo-élément, référencez ceci variable utilisant var(--scrollbar-background). Par exemple :

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

• Pour changer le style du pseudo-élément de manière dynamique, modifiez la valeur de la variable CSS en JavaScript :

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

Propriétés spécifiques au fournisseur

Pour cibler directement des pseudo-éléments spécifiques au fournisseur, tels que la barre de défilement WebKit, vous pouvez utiliser le préfixe du fournisseur correspondant en JavaScript. Par exemple, le code suivant définit la couleur d'arrière-plan de la barre de défilement :

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

Pour masquer la barre de défilement, utilisez la propriété spécifique au fournisseur -webkit-overflow-scrolling :

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

Remarque : La prise en charge du navigateur pour ces propriétés spécifiques au fournisseur peut varier. Il est recommandé de vérifier la matrice de compatibilité avant d'utiliser ces techniques dans le code de production.

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!