Wie kann ich CSS-Pseudoelementstile mithilfe von JavaScript dynamisch ändern?

CSS-Pseudoelementstile dynamisch über JavaScript manipulieren

Beim Versuch, CSS-Pseudoelementstile über JavaScript dynamisch zu ändern, können Benutzer auf das stoßen Fehler „Uncaught TypeError: Die Eigenschaft „style“ von null kann nicht gelesen werden.“ In diesem Artikel wird ein alternativer Ansatz untersucht, der CSS-Variablen nutzt, um insbesondere in WebKit-Browsern eine browserübergreifende Kompatibilität zu erreichen.

CSS-Variablenbasierter Ansatz

Definieren Sie in CSS eine CSS-Variable für die Hintergrundfarbe der Bildlaufleiste:

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

Anschließend wenden Sie die Variable auf die Bildlaufleiste an Pseudoelement:

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

JavaScript-Manipulation

Setzen Sie in JavaScript die CSS-Variable auf das #editor-Element:

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

Dies Die Methode ermöglicht eine dynamische Manipulation der Hintergrundfarbe der Bildlaufleiste, selbst in älteren Browsern, die keine modernen CSS-Funktionen unterstützen.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Pseudoelementstile mithilfe von JavaScript dynamisch ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!