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