Add -webkit -moz -ms -o css rules via JavaScript?

Question

Ok, I understand JavaScript addRule with simple css rules:

firstRule.style.color = "red";

But how do I add for example this:

-webkit-transform:translateX(16em) perspective(600px) rotateY(10deg)";

Something like this?:

firstRule.style.-webkit-transform = "translateX(16em) perspective(600px) rotateY(10deg)";

Because it does not work. Any ideas?

Esailija · Accepted Answer · 2012-10-24 13:26:33Z

1

camelize it (replace any dash with uppercase character that comes after the dash):

firstRule.style.WebkitTransform = "translateX(16em) perspective(600px) rotateY(10deg)";

You can also use .setProperty:

firstRule.style.setProperty( "-webkit-transform", "translateX(16em) perspective(600px) rotateY(10deg)" );

answered Oct 24, 2012 at 13:26

Esailija

140k24 gold badges280 silver badges328 bronze badges

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

Comments

robertp · Accepted Answer · 2012-10-24 13:30:43Z

1

You can do it this way:

firstRule.style["-webkit-transform"] = firstRule.style["-moz-transform"] = "translateX(16em) perspective(600px) rotateY(10deg)";

Just an example to adding the '-moz' prefix as well.

answered Oct 24, 2012 at 13:30

robertp

3,8321 gold badge22 silver badges13 bronze badges

Comments

Toping · Accepted Answer · 2012-10-24 13:29:06Z

0

document.getElementById('firstRule').setAttribute('style','xxxxxx');

clean and simple

answered Oct 24, 2012 at 13:29

Toping

7555 silver badges16 bronze badges

3 Comments

Esailija Over a year ago

This overwrites all other styles, it's not so simple when you need to retain them by concating strings

Toping Over a year ago

just get the actual style and set it with document.getElementById('firstRule').setAttribute('style', variable+'xxxxxx'); not that hard if you think a little

Esailija Over a year ago

I never said string concating is hard :P just annoying

Collectives™ on Stack Overflow

Add -webkit -moz -ms -o css rules via JavaScript?

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related