Wie ändere ich CSS-Pseudoelementstile mit JavaScript ohne „Uncaught TypeError: Eigenschaft ‚style' von null kann nicht gelesen werden'?

Ändern von CSS-Pseudoelementstilen mit JavaScript

Beim Versuch, die Farbe und Sichtbarkeit der Bildlaufleiste mithilfe von JavaScript anzupassen, kommt es häufig zu einem Problem der Fehler „Uncaught TypeError: Eigenschaft ‚style‘ von null kann nicht gelesen werden“. Dies liegt daran, dass Websites das Scrollen standardmäßig deaktiviert haben, was dazu führt, dass die Scrollbar-Elemente nicht vorhanden sind.

Um diese Einschränkung zu umgehen, können Sie die CSS-Vars-Technik verwenden. Bei dieser Methode müssen Sie Fallback-Werte in Ihrem CSS definieren und sie mithilfe von CSS-Variablen in JavaScript dynamisch manipulieren.

Definieren Sie in Ihrem CSS die Bildlaufleistenstile mit Fallback-Werten wie folgt:

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

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

Dann Ändern Sie in Ihrem JavaScript die Variable, die die Hintergrundfarbe der Bildlaufleiste steuert:

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

Dieser Ansatz ermöglicht eine dynamische Änderung von Bildlaufleistenstilen, ohne dass „Null“-Fehler auftreten. Beachten Sie, dass diese Technik möglicherweise nicht in allen Browsern unterstützt wird. Erwägen Sie daher eine ordnungsgemäße Verschlechterung für ältere Browser.

Das obige ist der detaillierte Inhalt vonWie ändere ich CSS-Pseudoelementstile mit JavaScript ohne „Uncaught TypeError: Eigenschaft ‚style' von null kann nicht gelesen werden'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!