Wie kann JavaScript CSS-Pseudoelemente wie Bildlaufleisten dynamisch anpassen?

CSS-Pseudoelemente dynamisch mit JavaScript anpassen

Viele Entwickler stehen vor der Herausforderung, CSS-Pseudoelementstile mithilfe von JavaScript dynamisch zu ändern. Diese Frage untersucht die Möglichkeit, das Aussehen und Verhalten von Elementen wie Bildlaufleisten durch JavaScript-Skripte zu ändern.

Ändern der Farbe und Sichtbarkeit der Bildlaufleiste

Die Frage zeigt zwei versuchte Skripte für Ändern der Farbe und Sichtbarkeit einer Bildlaufleiste:

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

Bei diesen Skripten treten jedoch Probleme auf Browserübergreifende Kompatibilität und Rückgabefehler aufgrund des Nullwerts der ausgewählten Elemente.

Browserübergreifende Implementierung mit CSS-Variablen

Während die Browserkompatibilität ein Problem darstellen kann, Die Antwort schlägt eine Lösung mit CSS-Variablen (CSS Vars) vor. CSS Vars ermöglicht die dynamische Änderung von CSS-Eigenschaften durch JavaScript.

Indem wir eine CSS-Variable für den Hintergrund der Bildlaufleiste definieren und diese in den Pseudoelementregeln verwenden, können wir die Farbe der Bildlaufleiste mit ändern JavaScript:

CSS:

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

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

JavaScript:

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

Dieser Ansatz ermöglicht die dynamische Änderung der Farbe der Bildlaufleiste unabhängig von Browsereinschränkungen.

Das obige ist der detaillierte Inhalt vonWie kann JavaScript CSS-Pseudoelemente wie Bildlaufleisten dynamisch anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!