JavaScript 如何存取和修改 CSS 自訂屬性？
- Linda Hamilton原創
- 2024-12-09 03:01:09917瀏覽
使用JavaScript 存取CSS 自訂屬性
JavaScript 提供了存取和操作CSS 自訂屬性（也稱為CSS 變數）的方法。與常規 CSS 屬性不同，這些自訂屬性可透過樣式表中的 var(...) 語法存取。
取得自訂屬性值
擷取以下值自訂屬性，請使用window.getCompulatedStyle(document.body).getPropertyValue('--name')，其中--name 是自訂屬性名稱。例如：
var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar');
設定自訂屬性值
要設定自訂屬性值，請使用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」按鈕現在會--mycolor 自訂屬性設為紅色並將文字加粗。
以上是JavaScript 如何存取和修改 CSS 自訂屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn