Wie kann ich in JavaScript auf CSS-Variablen zugreifen?

Zugriff auf CSS-Variablen in JavaScript

In der Webentwicklung bieten CSS-Variablen eine praktische Möglichkeit, Stile zu speichern und wiederzuverwenden. Während diese Variablen direkt in CSS festgelegt und geändert werden können, müssen Sie möglicherweise auf ihre Werte in JavaScript zugreifen.

Der Zugriff auf CSS-Variablen über JavaScript ist unkompliziert. So geht's:

Schritt 1: Berechnete Stile abrufen

Um die aktuellen berechneten Stile für ein Element abzurufen, verwenden Sie die Funktion getComputedStyle. Diese Funktion akzeptiert ein Element als Argument und gibt seine berechneten Stile als CSSStyleDeclaration-Objekt zurück.

var style = getComputedStyle(element);

Schritt 2: Variablenwert abrufen

Sobald Sie den haben Mit berechneten Stilen können Sie mithilfe der getPropertyValue-Methode des CSSStyleDeclaration-Objekts auf den Wert einer beliebigen CSS-Variablen zugreifen. Die getPropertyValue-Methode verwendet den Namen der Variablen als Argument.

var variableValue = style.getPropertyValue('variable-name');

Um beispielsweise in dem von Ihnen bereitgestellten Beispiel auf die CSS-Variable --color-font-general zuzugreifen, würden Sie Folgendes schreiben:

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

Die Variable „fontColor“ enthält nun den Wert der CSS-Variablen, in diesem Fall #336699.

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