4

I am curious how one would access/modify properties like -moz-transition (or any property from this list) by means of native javascript i.e. without relying on jQuery's .css('property', 'value');

For instance, to change an element's background-color one would work with element.style.backgroundColor.

Do vendor-specific property names just get camelCased and become operable? I couldn't do so, maybe they are no longer represented by properties of style and should be modified elsewhere? Or maybe they are not accessible through DOM at all?

Oleg
  • 24,465
  • 8
  • 61
  • 91

2 Answers2

3

Use upper camel case, e.g., el.style.MozTransition.

Example: http://jsfiddle.net/R3y6f/1/

Jonathan S.
  • 2,238
  • 16
  • 16
  • Amazing! I was camel-casing it as `mozTransition` instead, was there some documentation that pointed you to capitalizing the first letter of the property? I never could find any – Oleg May 24 '12 at 00:39
  • Be aware that Microsoft does it differently. – Knu May 24 '12 at 01:01
2

ex: -webkit-box-shadow

.style.setProperty("-webkit-box-shadow", "0 0 7px #ccc", null);
.style.removeProperty("-webkit-box-shadow");
.style["-webkit-box-shadow"];
Sebas
  • 21,192
  • 9
  • 55
  • 109
  • Does this imply that they are not accessible as DOM element properties? – Oleg May 24 '12 at 00:41
  • they are style properties, not element properties ;) – Sebas May 24 '12 at 00:44
  • I get lost in semantics thinking of `style` being a complex element property, kind of confirmed by `.style['property']` notation. Which is pretty neat, TIL, +1! – Oleg May 24 '12 at 01:10