1

The following JavaScript code works perfectly in WebKit-based browsers, but it doesn't work in Firefox:

canvas.style['left'] = "50%";
canvas.style['margin-left'] = "-" + (width / 2) + "px";

Inspecting the element in Firefox, I can see that the left property was successfully set by the above code, but the element has no margin-left property for some reason.

It seems I must be doing something wrong, which isn't surprising, because I haven't been able to figure out what the correct way to access (read or set) CSS style properties from JavaScript is. I've just found some examples using this notation and tried to follow them, with these mixed results.

What is the correct / standards-compliant way to access an element's CSS style properties from JavaScript?

Darshan Rivka Whittle
  • 32,989
  • 7
  • 91
  • 109
  • I flagged this for some kind of weird spam. SO is not your blog. – Esailija Jun 11 '12 at 10:18
  • 2
    Actually, this is perfectly fine. Related: http://meta.stackexchange.com/questions/2706/posting-and-answering-questions-you-have-already-found-the-answer-to – Florian Margaine Jun 11 '12 at 10:22
  • @Esailija, see Florians comment, nothing wrong with blogging on SO as long as the format follows Q&A style. – Qtax Jun 11 '12 at 10:28
  • @Qtax right, it does not fit the FAQ though as pointed out here: http://meta.stackexchange.com/a/133323/174972 – Esailija Jun 11 '12 at 10:33
  • A Library like JQuery will do all this for you... – Liam Jun 11 '12 at 10:38
  • 1
    @Esailija: Could you explain? – BoltClock Jun 11 '12 at 10:40
  • @BoltClock Apparently it's ok to use SO as a blogging platform, and I wasn't aware of that so I flagged. Sorry about that. – Esailija Jun 11 '12 at 10:44
  • Possible duplicate of [How do I reference a javascript object property with a hyphen in it?](http://stackoverflow.com/q/7122609/995876) – Esailija Jun 11 '12 at 10:47
  • @Esailija After finally figuring out how to solve my problem, I was able to find a few similar questions, including that one. I wasn't able to find any of them while I was stuck, however. I think that's because the questions are somewhat different (even though the solution is basically the same). I didn't know at the time that the hyphen had anything to do with my problem, and I didn't know about the dot notation. Also, I still want to see if there's a better answer than what I found -- just because I seem to have things working now doesn't mean I'm actually doing it right. – Darshan Rivka Whittle Jun 11 '12 at 12:09
  • @DarshanComputing Heh, it's usually the other way around. People don't know about bracket notation and use stuff like `eval("obj."+propName)` instead of `obj[propName]`. – Esailija Jun 11 '12 at 12:16
  • Regarding this question being closed / the possibility of being reopened: I'm quite new here, but I put a fair amount of thought and energy into this, and I carefully read the FAQ and tried to find duplicate questions before bothering writing my Q/A pair. As noted above, there are some very similar questions, but I felt that the devil is in the details, and the details are different enough to warrant the trouble of sharing my problem and solution. If the community disagrees with that, I can accept that, but I don't understand being closed for "not a real question." – Darshan Rivka Whittle Jun 11 '12 at 12:46
  • @BoltClock I hope it's okay to tag you about this. It seems to me incorrect that this was closed as "not a real question", and I'd appreciate your feedback. – Darshan Rivka Whittle Jun 11 '12 at 13:17
  • I've reopened your question — I can't see how it fits the description of "not a real question" either. Just because you have a ready-made answer to your question doesn't make your question any less valid! – BoltClock Jun 11 '12 at 14:30

2 Answers2

1

After much hair-pulling, I unearthed the following basic facts that are sure to be no-brainers to most JavaScript folks, but I imagine my confusion is not uncommon among others very new to JavaScript.

  • All objects in JavaScript are associative arrays.

Object properties can be accessed in either of two ways:

var o = new Object();
o.prop = "A string";
o['prop']; // => "A string"

While it is possible to use an object as a "normal" associate array and use keys with arbitrary strings:

o.['another-prop'] = 4 // Perfectly valid

in doing so, you would create a property that could not be accessed via the dot notation:

o.another-prop // Parsed as `o.another` minus `prop`

This is presumably the reason for:

  • DOM style properites use camelCase when accessed from JavaScript.

I was using the hyphenated property names used in CSS. These worked in all the WebKit-based browsers I tested, but it seems that is only because WebKit is forgiving.

So as far as I can tell, the correct way to access CSS style properties from JavaScript is to convert the property name to camel case, and then use either dot notation or bracketed associative array notation. The line that didn't work in Firefox becomes

canvas.style['marginLeft'] = "-" + (width / 2) + "px";

or

canvas.style.marginLeft = "-" + (width / 2) + "px";

That works for me in all browsers I've tested, but if something I've said isn't correct or consistent with the standards, I'd love to hear it.

Darshan Rivka Whittle
  • 32,989
  • 7
  • 91
  • 109
  • 2
    after much hair pulling? You answered the question as soon as it was asked – Esailija Jun 11 '12 at 10:15
  • *"All objects in JavaScript are associative arrays."* I'd rather say it's vice versa, you can use objects as associative arrays. An object is a *data type* whereas an associative array is more of a *data structure* (at least in JavaScript). – Felix Kling Jun 11 '12 at 10:22
  • 2
    @Esailija: After much hair-pulling, he wrote the question and the answer and posted them together. – BoltClock Jun 11 '12 at 10:38
  • One minor addition. If a DOM attribute name is a reserved word in JavaScript, it is prefixed with the word "html", the entire name camel-cased. Thus, the ` – Alexander Pavlov Jun 15 '12 at 12:30
0

Remove dash and next ones words with a capital letter, margin-left to marginLeft etc

  obj.style.marginLeft = '10px';
abuduba
  • 4,986
  • 7
  • 26
  • 43