Accessing vendor-specific CSS properties w/JavaScript

Question

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?

Jonathan S. · Accepted Answer · 2012-05-24 00:31:48Z

3

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

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

answered May 24, 2012 at 0:31

Jonathan S.

2,22816 silver badges16 bronze badges

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

2 Comments

Oleg Over a year ago

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

Knu Over a year ago

Be aware that Microsoft does it differently.

Sebas · Accepted Answer · 2012-05-24 00:30:20Z

2

ex: -webkit-box-shadow

.style.setProperty("-webkit-box-shadow", "0 0 7px #ccc", null);
.style.removeProperty("-webkit-box-shadow");
.style["-webkit-box-shadow"];

answered May 24, 2012 at 0:30

Sebas

21.6k9 gold badges60 silver badges109 bronze badges

3 Comments

Oleg Over a year ago

Does this imply that they are not accessible as DOM element properties?

Sebas Over a year ago

they are style properties, not element properties ;)

Oleg Over a year ago

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!

Collectives™ on Stack Overflow

Accessing vendor-specific CSS properties w/JavaScript

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related