Wie formatiere ich CSS-Pseudoelemente dynamisch mit JavaScript?

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!