Set custom style attribue doesn't work in IE11

Question

I have this simple Javascript code to change custom CSS attribute

var root = document.documentElement;
root.style.setProperty("--custom-bg", "#4f5357");

This works fine in Firefox Google Chrome but it doesn't work in IE 11 also tried

root['--custom-bg'] = "#4f5357";
root.attr("--custom-bg", "#4f5357");
root.style['--custom-bg'] = "#4f5357";

none of them worked.

Answer 1

IE11 doesn't support css custom properties, therefore it doesn't supports this setProperty method.

Checkout this css-vars-ponyfill , which aims to add basic support.

Answer 2

Answered: Workaround for CSS variables in IE?

This was the best solution for me, no installation is needed:

https://www.npmjs.com/package/ie11-custom-properties

Copy this to the head of your html:

<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\x2fscript>');</script>