如何在 JavaScript 中存取 CSS 變數？

在 JavaScript 中存取 CSS 變數

在 Web 開發中，CSS 變數提供了一種儲存和重複使用樣式的便捷方法。雖然可以直接在 CSS 中設定和修改這些變量，但您可能需要在 JavaScript 中存取它們的值。

從 JavaScript 存取 CSS 變數非常簡單。操作方法如下：

第 1 步：取得計算樣式

要取得元素的目前計算樣式，請使用 getCompulatedStyle 函數。此函數接受一個元素作為參數，並將其計算樣式作為 CSSStyleDeclaration 物件傳回。

var style = getComputedStyle(element);

第 2 步：取得變數值

一旦你有了計算變數樣式，您可以使用 CSSStyleDeclaration 物件的 getPropertyValue 方法存取任何 CSS 變數的值。 getPropertyValue 方法將變數的名稱作為參數。

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

例如，要存取您提供的範例中的CSS 變數--color-font-general，您可以編寫：

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

fontColor 變數現在將保存CSS 變數的值，在本例中為#336699。

以上是如何在 JavaScript 中存取 CSS 變數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！