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.

Answer 1

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:

1. Converting the first character to lower case
2. Converting all characters after dashes to upper case
3. Removing all dashes

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

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

Answer 2

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";