使用JavaScript按字符串设置CSS属性

Question

So I saw this question - Get/Set CSS property values via Javascript: questions and this solution - http://www.w3schools.com/jsref/dom_obj_style.asp .

Where my question differs is I am building a WYSIWYG editor and I want to dynamically set the properties via native javascript. So I was wondering if there was a way I could do something like this:

document.getElementById("myH1").style.property("color") = "red";

Answer 1

Yeah, you can use the style name in camel case notation, or target it like you would an array name:

document.getElementById("myH1").style.color = "red";
document.getElementById("myH1").style["color"] = "red";

Here's a fiddle with it in action: http://jsfiddle.net/m7kb2Lsa/

If you want to see all of the styles you can set on an element with the correct camel casing the easiest way I've found is to type something like this in the console (assuming the element exists on the page), this will give you a full list of everything you can set:

document.getElementById("myH1").style

Answer 2

The "proper way" is using setProperty or setPropertyValue :

element.style.setProperty("background-color", "red");
element.style.setPropertyValue("background-color", "red");

They behave the same, the only difference is that setProperty accepts an optional third argument to set !important priority.

However, for convenience, the CSSStyleDeclaration interface is extended by partial interfaces in order to allow to get or set the values of supported CSS properties using IDL camel-case attributes .

That means you can also use

element.style.backgroundColor = "red";
element.style["backgroundColor"] = "red";