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

在 JavaScript 中与 CSS 自定义属性交互

在现代 Web 开发中，CSS 自定义属性（也称为 CSS 变量）发挥着至关重要的作用增强样式定制和代码可维护性。这些属性可以在样式表中定义并使用 var(...) 语法进行访问。然而，通过 JavaScript 访问和操作它们提出了独特的挑战。

自定义属性访问和操作

要使用 JavaScript 访问 CSS 自定义属性，您可以利用文档.body.style.setProperty() 方法。此方法接受两个参数：

• --name：自定义属性的名称，以两个破折号 (--) 为前缀。
• value：要分配给的值属性。

例如，更改在提供的 HTML 中定义的“--mycolor”自定义属性代码：

document.body.style.setProperty('--mycolor', 'red');

用于属性操作的 jQuery

或者，您可以使用 jQuery 的 css() 方法来实现相同的效果结果：

$('body').css('--mycolor', 'red');

示例

在您提供的 HTML 代码中，您尝试使用不正确的语法修改“--mycolor”属性。为了达到预期的效果，需要进行以下修改：

function plain_js() { 
  document.body.style['font-weight'] = 'bold';
  document.body.style.setProperty('--mycolor', 'red');
}

function jQuery_() {
  $('body').css('font-weight', 'bold');
  $('body').css('--mycolor', 'red');
}

通过使用适当的语法，您现在可以成功设置 'font-weight' 属性和 '--mycolor' 自定义属性，动态改变目标元素的文本和背景颜色。

以上是如何使用JavaScript有效访问和修改CSS自定义属性？的详细内容。更多信息请关注PHP中文网其他相关文章！