How to edit CSS styles in JavaScript?

Question

So for example I can do this:

document.getElementById('element').onclick = function() {
    document.getElementById('element').style.color = '#FFFFFF';
}

But how should I do this?

document.getElementById('element').onclick = function() {
    document.getElementById('element').style.-moz-box-shadow = '1px 1px 1px #000'; 

}

I hope you get what I mean :)

Please do not post any answer related with jQuery or any library, I want it in plain javascript.

Why are you trying to edit the style directly, rather than modify classes? You're just building in brittle browser awareness. — annakata
– annakata, Commented Aug 24, 2010 at 13:07
-moz-box-shadow has nothing to do with CSS3. See the vendor-specific prefix? That means it's non-standard. — Matt Ball
– Matt Ball, Commented Aug 24, 2010 at 14:13

Jerod Venema · Accepted Answer · 2010-08-24 13:05:33Z

5

I believe it's:

myobject.MozBoxShadow = '1px 1px 1px #000';

It doesn't follow the "typical" formatting of a style object (which would lower-case the "M") because of the initial "-" character. Converting between style properties and JS properties for those styles means:

Converting the first character to lower case
Converting all characters after dashes to upper case
Removing all dashes

Thus, "-moz-box-shadow" becomes:

-moz-box-shadow (the first character is a "-", so it doesn't have a lower case)
-Moz-Box-Shadow
MozBoxShadow

edited Aug 24, 2010 at 13:05

answered Aug 24, 2010 at 12:59

Jerod Venema

44.7k5 gold badges70 silver badges109 bronze badges

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

1 Comment

Adam Halasz Over a year ago

Yes it is :D I've found it just right now somewhere, thanks for your answer ;)

cofiem · Accepted Answer · 2010-08-24 13:00:25Z

1

I think you change '-' to a capital letter, so:

 document.getElementById('element').style.-moz-box-shadow = 1px 1px 1px #000;

Should be:

  document.getElementById('element').style.MozBoxShadow = "1px 1px 1px #000";

answered Aug 24, 2010 at 13:00

cofiem

1,4241 gold badge18 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to edit CSS styles in JavaScript?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related