Können Sie CSS-Pseudoelementstile mit JavaScript ändern?

CSS-Pseudoelementstile mit JavaScript ändern

Ist es möglich, den Stil eines CSS-Pseudoelements durch JavaScript zu ändern?

Bedenken Sie Folgendes Beispiel für die dynamische Einstellung der Farbe der Bildlaufleiste mit diesem Code:

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

Browser antworten jedoch mit dem folgenden Fehler: „Uncaught TypeError: Cannot read property ‚style‘ of null.“

Kann diese Aufgabe auf andere Weise erledigt werden?

In Webkit-Browsern können Sie dies durch die Verwendung von CSS-Variablen erreichen.

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

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

So bearbeiten Sie diesen Wert in JavaScript:

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

Weitere Beispiele für die Verwaltung von CSS-Variablen mit JavaScript finden Sie unter die folgende Ressource: https://eager.io/blog/communicating-between-javascript-and-css-with-css-variables/

Das obige ist der detaillierte Inhalt vonKönnen Sie CSS-Pseudoelementstile mit JavaScript ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!