How can I get firefox to set style attributes using style['attribute-name'] =?

Question

In this example Chrome sets the background red, firefox and IE do not.

Trying:

document.getElementById("firefoxDiv").style['backgroundColor'] = "Red";

and

document.getElementById("firefoxDiv").style['background-color'] = "Red";

I would much rather be able to use the same syntax used in external CSS background-color vs inline using javascript .style.backgroundColor =

Thanks for your help!

Note: NO jQuery please.

Answer 1

Use .style.setProperty(propertyName, value [, priority]) instead of an expando property.

Example:

document.getElementById("firefoxDiv").style.setProperty('background-color', 'red');