jquery - 通过 jQuery 获取 CSS 变量的值

Question

<input type="color">在没有默认值的情况下使用似乎会导致一个无用的控件（我尝试使用 Firefox 53），因为颜色永远不会改变，在添加默认值时，一切都按预期运行（工作示例）。

我实际上使用这个值来填充一个 css 变量，例如：

const colors = [...document.querySelectorAll(".color-controls input[type=color]")];
colors[0].addEventListener("input", setFrontColor);    
docStyle.setProperty("--front-color", colors[0].value);

限制在 HTML 属性中设置默认值强制我手动设置它，而我想设置value通过 JS 获取当前 CSS 变量“ --front-color”值。

如何通过 jQuery 获取 CSS 变量的值？

Answer 1

$('button').css("color",'red')
console.log($('button').css("color"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>asd</button>

1. 利用.css()
2. 设置使用.css("color","red");
3. 得到使用.css("color");