Set CSS Property by string with JavaScript

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";

Yes. Bracket notation: document.getElementById("myH1").style["color"] = "red"; — blex
– blex, Commented Aug 12, 2015 at 15:22
@blex that works for something like color but your will have to still dromedaryCase ones like background-image, no? If not, thats cool - I didn't know it supported both syntaxes. — somethinghere
– somethinghere, Commented Aug 12, 2015 at 15:23
Also must point out, and this is certainly extra-topical, but this is WAY easier using jQuery. The very thing it was designed for, in fact. — Raydot
– Raydot, Commented Aug 12, 2015 at 16:18

Oriol · Accepted Answer · 2015-08-12 16:21:29Z

4

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";

edited Aug 12, 2015 at 16:21

answered Aug 12, 2015 at 15:58

Oriol

291k71 gold badges459 silver badges535 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matthew Riches · Accepted Answer · 2015-08-12 15:32:12Z

2

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

edited Aug 12, 2015 at 15:32

answered Aug 12, 2015 at 15:25

Matthew Riches

2,28418 silver badges26 bronze badges

4 Comments

somethinghere Over a year ago

Wouldn't it be very useful if you expanded your answer and mentioned that properties with multiple words need to be dromedaryCased? Otherwise he's in for another SO question that could've easily be resolved right here, right now.

Mr Lister Over a year ago

@somethinghere but doesn't the SO question mentioned in this question here address all that? Sure, Matthew could copy and paste a lot of stuff, but I think it would all be redundant.

somethinghere Over a year ago

@MrLister I'm not seeing a SO question referenced in this answer... I just believe that expanding the answer a little bit with some information on the pitfalls of a solution will help the OP a lot in the future, and anyone who reads this. He did mention CamelCasing in his edit, and how to find the right keys, so I find this a +1

Raydot Over a year ago

@somethinghere he said in the OP's QUESTION, not the answer. Other than that...well I've got no dog in this kennel.

Collectives™ on Stack Overflow

Set CSS Property by string with JavaScript

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related