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!
