Kann JavaScript CSS-Pseudoelementstile dynamisch ändern?

Ändern von CSS-Pseudoelementstilen mit JavaScript: Ein genauerer Blick

Ist es möglich, den Stil von CSS-Pseudoelementen durch dynamisch zu ändern? JavaScript? Angenommen, wir möchten die Farbe der Bildlaufleiste festlegen und sie vollständig ausblenden. Die Verwendung von Skripten wie den folgenden gibt jedoch den Fehler „Eigenschaft ‚Stil‘ von Null kann nicht gelesen werden“ zurück:

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

Lassen Sie uns einen alternativen Ansatz untersuchen, der in Webkit-Browsern effektiv funktioniert und in anderen eine ordnungsgemäße Verschlechterung ermöglicht.

Verwendung von CSS-Variablen für das Styling

Moderne Browser bieten CSS-Variablen (CSS Vars), die eine leistungsstarke Möglichkeit zum Definieren und Bearbeiten benutzerdefinierter CSS-Eigenschaften aus JavaScript bieten. Durch den Einsatz von CSS-Variablen können Sie die gewünschten Styling-Effekte erzielen und gleichzeitig die browserübergreifende Kompatibilität beibehalten.

Definieren Sie in Ihrem CSS die CSS-Var --scrollbar-background und wenden Sie sie auf den Daumen der Bildlaufleiste an:

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

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

Ändern Sie nun in Ihrem JavaScript die Eigenschaft --scrollbar-background im #editor Element:

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

Durch die Verwendung von CSS-Variablen in Verbindung mit JavaScript können Sie Pseudoelementstile mühelos ändern und die Kompatibilität mit einer Vielzahl von Webbrowsern sicherstellen.

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