Wie kann ich mit JavaScript auf CSS-Variablen zugreifen?

Zugriff auf CSS-Variablen in JavaScript

CSS-Variablen sind ein leistungsstarkes Werkzeug zum Speichern von Stilinformationen in Ihren CSS-Dateien. Auf sie kann über JavaScript zugegriffen werden, sodass Sie das Erscheinungsbild Ihrer Webanwendung dynamisch aktualisieren können.

Um über JavaScript auf eine CSS-Variable zuzugreifen, können Sie die Methode getComputedStyle() verwenden, um die berechneten Stile einer abzurufen Element und verwenden Sie dann die Methode getPropertyValue(), um den Wert der gewünschten Eigenschaft abzurufen.

Zum Beispiel, wenn Sie die folgende CSS-Variable haben Deklaration:

:root {
  --color-font-general: #336699;
}

Sie können in JavaScript mit dem folgenden Code auf den Wert dieser Variablen zugreifen:

getComputedStyle(element).getPropertyValue('--color-font-general');

Dadurch wird der Wert des CSS --color-font-general zurückgegeben Variable als String. Anschließend können Sie diesen Wert verwenden, um das Erscheinungsbild Ihrer Webanwendung dynamisch anzupassen, indem Sie beispielsweise die Farbe von Textelementen festlegen.

Hier ist ein Beispiel dafür, wie Sie mit dieser Technik die Farbe aller Textelemente ändern können in einem Dokument:

var elements = document.getElementsByTagName('p');
for (var i = 0, element; element = elements[i++];) {
  element.style.color = getComputedStyle(element).getPropertyValue('--color-font-general');
}

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript auf CSS-Variablen zugreifen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!