如何使用 JavaScript 访问和修改 CSS 自定义属性？

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