使用 JavaScript 访问 CSS 自定义属性
自定义 CSS 属性或 CSS 变量提供了一种在整个样式表中定义和重用样式值的方法。要使用 JavaScript 操作这些属性，有多种方法可用。
一种方法是通过“document.body.style.setProperty()”方法：
var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar'); //get
document.body.style.setProperty('--foo-bar', newValue); //set例如，提供的代码片段，其中使用自定义属性“--(mycolor)”设置“background-color”属性，它将被修改为如下：
function plain_js() {
document.body.style['font-weight'] = 'bold';
document.body.style.setProperty('--mycolor', 'red');
}此方法直接设置 CSS 自定义属性的值，更改将反映在元素的计算样式中。
或者，您可以使用 jQuery 来处理 CSS自定义属性：
$('body').css('--foo-bar', newValue); //set此方法使用 jQuery 'css()' 函数来设置或检索 CSS 属性的值，包括 CSS变量：
function jQuery_() {
$('body').css('font-weight', 'bold');
$('body').css('--mycolor', 'red');
}通过使用这些方法，您可以动态控制 CSS 自定义属性并修改网页和应用程序的视觉外观。
以上是如何使用 JavaScript 访问和修改 CSS 自定义属性？的详细内容。更多信息请关注PHP中文网其他相关文章！
