如何使用 JavaScript 存取和修改 CSS 自訂屬性（變數）？

透過JavaScript 存取CSS 自訂屬性（變數）

JavaScript 提供了與CSS 自訂屬性（稱為CSS 變數）互動的方法。儘管在樣式表中被定義為 var()，但透過 JavaScript 存取它們需要稍微不同的方法。

取得並設定自訂屬性

取得自訂值屬性，使用下列語法：

var value = document.body.style.getPropertyValue('--property-name');

類似地，要設定自訂屬性，使用：

document.body.style.setProperty('--property-name', 'new-value');

範例實作

考慮CSS 中定義的自訂屬性 --mycolor 作為元素的背景顏色。要使用JavaScript 更改其顏色，您可以執行以下程式碼：

document.body.style.setProperty('--mycolor', 'red');

替代方法

jQuery 還提供了與自訂屬性互動的方法：

// Get property
var value = $('body').css('--property-name');

// Set property
$('body').css('--property-name', 'new-value');

避免常見陷阱

如初始範例所示，使用標準[style.property] 語法（例如document.body.style['--mycolor']）存取自訂屬性將不起作用。相反，請使用 getPropertyValue 和 setProperty 方法，並在屬性名稱前面加上雙連字元。

以上是如何使用 JavaScript 存取和修改 CSS 自訂屬性（變數）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！