在我的应用程序中，我有一些参数，我想使用 jQuery 将它们放入 CSS 变量中。我也想阅读它们。
我在读取 CSS 变量的值时遇到了困难，并尝试了很多东西……在我输入问题时，在“可能已经有了答案的问题”中找到了解决方案。
无论如何，我附上了一个片段，因为我需要知道:
⋅⋅⋅ 为什么方法 1 不起作用？
⋅⋅⋅ 有没有办法使用 jQuery 获取 CSS var 值？
我觉得它缺少一个简单的解决方案来处理 CSS 变量……我错了吗？
当然，如果没有任何办法，我会使用 javascript 解决方案。但我想确定一下。
预先感谢您的回答。
// This method doesn't work for writing CSS var.
$(":root").css("--color1", "red");
console.log(".css method on “:root” :", $(":root").css("--color1"));
// This methods works for writing CSS var:
$(":root")[0].style.setProperty("--color2", "lime");
console.log("[0].style method on “:root” :", $(":root")[0].style.getPropertyValue('--color2'));#p1 {
background-color: var(--color1);
}
#p2 {
background-color: var(--color2);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body id="bodyID">
<p id="p1">p with background --color1</p>
<p id="p2">p with background --color2</p>
</body>
<html>最佳答案
jQuery 仅支持 version 3.2.0 and later 中的 CSS 自定义属性. 2.x 或更早版本不支持它们，因此使用 .css() 访问它们在这些版本中将不起作用。如果升级 jQuery 不是一个选项，您将需要使用内置的 style 对象来访问它们。
$(":root").css("--color1", "red");
console.log(".css method on “:root” :", $(":root").css("--color1"));
$(":root")[0].style.setProperty("--color2", "lime");
console.log("[0].style method on “:root” :", $(":root")[0].style.getPropertyValue('--color2'));#p1 {
background-color: var(--color1);
}
#p2 {
background-color: var(--color2);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<p id="p1">p with background --color1</p>
<p id="p2">p with background --color2</p>关于javascript - 在 jQuery 中修改 CSS 变量/自定义属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49048192/