document.documentElement.style.setProperty('--some-color'， 'green') 在 IE 中不起作用

Question

我在选择器中的单独的CSS文件中声明了自定义CSS变量。

.ui-grid-row:nth-child(odd) {
background-color: var(--altbg-color) !important;
}

这不是根元素。因此，不确定在这种情况下，CSS-VARS-Ponyfill将如何工作。我也尝试过，但无法使其正常工作。（如果有人能帮助我使它起作用，我会很感激。）

我试图使用

将通过JavaScript（我使用的AngularJS 1.3）设置为变量

document.documentElement.style.setProperty('--some-color', 'green')

与Chrome＆amp一起工作正常Firefox，但不在IE（11）中。

有人有解决方案吗？

预先感谢。

Answer 1

IE 11中不支持它。

您只能使用IE Edge 16及以上的CSS变量。但是，它在IE 15中得到部分支持。

• 在Edge 15中，使用CSS变量的嵌套计算未计算并被忽略，请参见Bug
• 在Edge 15中使用CSS变量的动画可能会导致网页崩溃，请参见bug
• 在Edge 15中不可能在伪元素中使用CSS变量，请参见bug

不过，有一个多填充：

https://www.npmjs.com/package/css-vars-ponyfill

这不支持IE Edge 11.它开始支持IE Edge 12 。没有边缘，它开始支持IE 9。

IE  Edge    Chrome  Firefox Safari
----------------------------------
9+  12+     19+     6+      6+

Answer 2

有一个多填充，它几乎可以完全支持IE11中的CSS变量，包括JS融合：
https://github.com/nuxodin/ie11customproperties
（我是作者）

脚本利用了IE具有最小的自定义属性支持的事实，可以在其中定义属性和读取级别。
.myEl {-ie-test:'aaa'} // only one dash allowed! "-"
然后在JavaScript中阅读：
getComputedStyle( querySelector('.myEl') )['-ie-test']

演示：

https://rawcdn.githack.com/nuxodin/ie11customproperties/Ed6A269145661BFC6A43A43A43A43A5B69F06248FA760E760E766/demo.htemo.htmo.html