如何使用 JavaScript 动态更改 CSS :root 变量？

使用 JavaScript 更改 CSS :root 颜色变量

在 Web 开发中，自定义主题通常涉及利用 :root 元素中定义的 CSS 自定义属性（“变量”）。要通过 JavaScript 动态更改这些颜色，必须了解正确的方法。

使用 JavaScript 设置 CSS 变量的一种方法是通过 document.documentElement.style.setProperty 函数。该函数接受两个参数：变量名（前缀为 --）和所需的值。例如，要将 --main-color 变量设置为黑色：

document.documentElement.style.setProperty('--main-color', '#000000');

此方法可确保 CSS 变量正确更新并反映 JavaScript 代码中的更改。

在提供的代码示例，问题是 $(':root').css('--main-color', '#000000') 使用 jQuery .css() 方法，该方法专为内联样式，并不能有效修改 CSS 变量。

通过如上所述的 document.documentElement.style.setProperty 函数，您可以使用 JavaScript 成功更改 :root 元素中的 CSS 变量，从而实现动态主题定制您的网页。

以上是如何使用 JavaScript 动态更改 CSS :root 变量？的详细内容。更多信息请关注PHP中文网其他相关文章！