0

I've got some sizing styles that I'm setting on the fly. I generally develop in chrome, and was directly setting attributes on the style attribute of the element like so:

element.style['padding-right'] = computedRightPadding + 'px';

I found recently that this does not work in firefox (version 24.6.0). The attribute on the element object looks like it's set correctly, but there is no change in the actual styling of the element. I've got a fiddle showing this here.

What's a good, cross-browser way of setting this style with javascript? I found this question, which says to do the method I'm currently using, which doesn't work. I'd rather not rely on an external library for what seems like it should be a trivial operation.

Community
  • 1
  • 1
ckersch
  • 7,507
  • 2
  • 37
  • 44
  • 1
    `element.style.paddingRight` will work everywhere. And,.. it won't create a string instance just for dereferencing the property. – techfoobar Jul 16 '14 at 16:16

1 Answers1

3

Use: parent.style.paddingRight = '100px';

jsFiddle example

Or parent.setAttribute('style', 'padding-right:100px;');

jsFiddle example

j08691
  • 204,283
  • 31
  • 260
  • 272
  • [CSS Properties Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference) – showdev Jul 16 '14 at 16:18
  • 1
    But the second alternative resets all the other style properties defined on the element (via the style attribute, not via classes). Check: http://jsfiddle.net/y89yU/1/ - `padding-right` is gone. – techfoobar Jul 16 '14 at 16:30
  • @techfoobar Yep. What you really want there if you want to use the hyphenated name is `parent.style.setProperty('padding-right', '100px')`. – Boris Zbarsky Jul 16 '14 at 18:53