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

通过 JavaScript 访问 CSS 自定义属性（变量）

JavaScript 提供了与 CSS 自定义属性（称为 CSS 变量）交互的方法。尽管在样式表中被定义为 var()，但通过 JavaScript 访问它们需要稍微不同的方法。

获取和设置自定义属性

获取自定义值属性，使用以下语法：

var value = document.body.style.getPropertyValue('--property-name');

类似地，要设置自定义属性，使用：

document.body.style.setProperty('--property-name', 'new-value');

示例实现

考虑 CSS 中定义的自定义属性 --mycolor 作为元素的背景颜色。要使用 JavaScript 更改其颜色，您可以执行以下代码：

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

替代方法

jQuery 还提供了与自定义属性交互的方法：

// Get property
var value = $('body').css('--property-name');

// Set property
$('body').css('--property-name', 'new-value');

避免常见陷阱

如初始示例所示，使用标准 [style.property] 语法（例如 document.body.style['--mycolor']）访问自定义属性将不起作用。相反，请使用 getPropertyValue 和 setProperty 方法，并在属性名称前添加双连字符。

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