Dynamisches CSS-Pseudoelement-Styling mit JavaScript
Ist es möglich, CSS-Pseudoelement-Stile mit JavaScript zu ändern? Beispielsweise können Sie die Farbe der Bildlaufleiste dynamisch anpassen oder ausblenden. Versuche, dies mit diesen Skripten zu tun, haben jedoch zu einem „TypeError: Cannot read property ‚style‘ of null“ geführt.
LÖSUNG: Einführung von CSS-Variablen
While Da die browserübergreifende Interoperabilität möglicherweise keine Priorität hat, bietet die Verwendung von CSS-Variablen (CSS Vars) eine effektive Lösung in WebKit-Browsern. Mit dieser Methode können Sie Variablen in CSS deklarieren und sie mithilfe von JavaScript dynamisch ändern.
Definieren Sie in Ihrem CSS die Hintergrundfarbe der Bildlaufleiste als Variable:
#editor {
--scrollbar-background: #ccc;
}Dann formatieren Sie den Bildlaufleisten-Daumen Verwenden der Variablen:
#editor::-webkit-scrollbar-thumb:vertical {
/* Fallback */
background-color: #ccc;
/* Dynamic value */
background-color: var(--scrollbar-background);
}In JavaScript können Sie den Variablenwert im #Editor ändern Element:
document.getElementById("#editor").style.setProperty('--scrollbar-background', localStorage.getItem("Color"));Mit diesem Ansatz können Sie die Farbe der Bildlaufleiste dynamisch ändern, ohne direkt auf den Stil des Pseudoelements zuzugreifen, wodurch das „TypeError“-Problem vermieden wird.
Weitere Beispiele finden Sie unter diese Ressource zur CSS-Variablenmanipulation mit JavaScript: https://eager.io/blog/communicating-between-javascript-and-css-with-css-variables/
Das obige ist der detaillierte Inhalt vonWie formatiere ich CSS-Pseudoelemente dynamisch mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
