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 和 Firefox，但不適用於 IE(11)。

有人有解決方案嗎？

提前致謝。

Answer 1

它在 IE 11 中不受支持。

您只能使用 IE edge 16 及更高版本的 CSS 變量。 但是，它在 IE 15 中得到部分支持。

• 在 Edge 15 中，使用 css 變量的嵌套計算不會被計算並被忽略， 參見 bug
• 在 Edge 15 中，帶有 css 變量的動畫可能會導致網頁崩潰查看錯誤
• 在 Edge 15 中不可能在偽元素中使用 css 變量， 請參閱錯誤

不過，有一個 polyfill：

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

有一個 polyfill，它幾乎可以完全支持 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/ed6a269145661bfc6a43a5b69f06248fa760e766/demo.html