2

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";
Community
  • 1
  • 1
MrSteamfist
  • 73
  • 8
  • 3
    Yes. Bracket notation: `document.getElementById("myH1").style["color"] = "red";` – blex Aug 12 '15 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 Aug 12 '15 at 15:23
  • @somethinghere: Yes, that's right, `backgroundImage`. – Simba Aug 12 '15 at 15:24
  • 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 Aug 12 '15 at 16:18

2 Answers2

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";
Oriol
  • 274,082
  • 63
  • 437
  • 513
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
Matthew Riches
  • 2,298
  • 18
  • 26
  • 4
    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. – somethinghere Aug 12 '15 at 15:26
  • @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. – Mr Lister Aug 12 '15 at 15:35
  • @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 – somethinghere Aug 12 '15 at 15:38
  • @somethinghere he said in the OP's QUESTION, not the answer. Other than that...well I've got no dog in this kennel. – Raydot Aug 12 '15 at 16:18