Comment puis-je styliser dynamiquement des pseudo-éléments CSS dans WebKit à l'aide de JavaScript ?

Style dynamique des pseudo-éléments CSS via JavaScript dans WebKit

Modifier dynamiquement les styles des pseudo-éléments CSS via JavaScript a été un défi courant pour les développeurs. Dans les navigateurs Webkit en particulier, les tentatives de manipulation de propriétés telles que l'arrière-plan et la visibilité renvoient souvent des erreurs nulles.

Une solution de contournement consiste à utiliser des variables CSS, qui offrent une approche plus moderne et polyvalente. En définissant une variable dans votre CSS, vous pourrez par la suite manipuler sa valeur en JavaScript et l'appliquer à vos pseudo-éléments.

Dans votre CSS, déclarez une variable CSS comme ceci :

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

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

Ensuite, dans votre JavaScript, ajustez la variable --scrollbar-background sur l'élément #editor pour modifier dynamiquement la barre de défilement. apparence :

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

Cette méthode répond efficacement aux limites de la manipulation directe du style pour les pseudo-éléments dans les navigateurs Webkit, tout en offrant également une interopérabilité transparente avec les navigateurs plus anciens qui ne prennent pas en charge les 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!