首頁 >web前端 >css教學 >如何使用 JavaScript 存取和修改 CSS 自訂屬性(變數)?

如何使用 JavaScript 存取和修改 CSS 自訂屬性(變數)?

Linda Hamilton
Linda Hamilton原創
2024-12-06 01:46:14386瀏覽

How Can I Access and Modify CSS Custom Properties (Variables) with JavaScript?

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn