使用 JavaScript 訪問 CSS 自定義屬性
JavaScript 提供了訪問和操作 CSS 自定義屬性（也稱為 CSS 變量）的方法。與常規(guī) CSS 屬性不同，這些自定義屬性可通過樣式表中的 var(...) 語法訪問。
獲取自定義屬性值
檢索以下值自定義屬性，請(qǐng)使用 window.getCompulatedStyle(document.body).getPropertyValue('--name')，其中 --name 是自定義屬性名稱。例如：
var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar');
設(shè)置自定義屬性值
要設(shè)置自定義屬性值，請(qǐng)使用 document.body.style.setProperty('--name', value)，其中 --name 是自定義屬性名稱，value 是新值。例如：
document.body.style.setProperty('--foo-bar', 'red');
示例
考慮以下代碼：
<body>
<p>Let's try to make this text bold and the background red.</p>
<button onclick="plain_js()">Plain JS</button>
<button onclick="jQuery_()">jQuery</button>
<script>
function plain_js() {
document.body.style.setProperty('--mycolor', 'red');
document.body.style['font-weight'] = 'bold';
};
function jQuery_() {
$('body').css('--mycolor', 'red');
$('body').css('font-weight', 'bold');
}
</script>
</body>
單擊“Plain JS”或“jQuery”按鈕現(xiàn)在將 --mycolor 自定義屬性設(shè)置為紅色并將文本加粗。
以上是JavaScript 如何訪問和修改 CSS 自定義屬性？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！