在 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中文網其他相關文章!