使用 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中文网其他相关文章！
