用 jQuery 编辑 CSS 变量的最简单方法是什么？答案

【问题标题】：What is the simplest way to edit CSS variables with jQuery?用 jQuery 编辑 CSS 变量的最简单方法是什么？
【发布时间】：2017-05-15 18:00:54
【问题描述】：

我已经能够使用 document.documentElement.style.setProperty("--text-color", "#333") 编辑 CSS 变量，但是，我无法使用 jQuery 重现这一点，.css() 原型似乎只适用于已知的 CSS 属性。

这是上述 CSS 变量的示例 CSS。

:root {
  --text-color: #888;
}

div {
  color: var(--text-color);
}

【问题讨论】：

$("element").css("color", "#888")
@Bindrid CSS 变量，而不是通用 CSS。 developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
哦，你有没有试过把它们作为一个属性来纠正？
@Bindrid 我能够让它与$("html").attr("style", "--text-color", "#333") 一起工作，但由于我使用 JS 变量来填写属性名称和值，我要么必须 - 因为我是使用多个 CSS 变量 - 获取当前样式 attr 值并附加新的 var 和值，对我想更改的每个变量进行硬编码，否则我必须通过循环遍历所需的值和输入来做一些魔术。所以它确实有效，但与香草 JS document.documentElement.style.setProperty("--text-color", "#333") 相比非常笨重。

标签： javascript jquery html css css-variables

【解决方案1】：

截至 2017 年 3 月 16 日，对自定义属性的支持已在 jQuery 3.2.0 and later 中提供。没有计划将此功能向后移植到 2.x 或更早版本，因此如果您出于维护原因需要使用旧版本的 jQuery，则需要继续使用内置的 style 对象来访问您的自定义属性.

jQuery 还不支持自定义属性。有一个pull request 尚待审查（但根据最近的 cmets 似乎即将发布一个即将发布的版本）。虽然优先级并不高，因为自定义属性仍然是一个相当新的功能，并且它们的性质使得为原生支持它们的浏览器开发一个包装器，为不支持它们的浏览器在 JavaScript 中重新实现它们，和 em> 测试该功能以确保一切正常，而不会破坏其他 jQuery 功能以及现有网站，这是一项艰巨的任务。

【讨论】：