How to add css box-shadow using .style JavaScript property

Question

I've got the following JavaScript snippet:

document.getElementById("imgA").style.box-shadow = "0 0 5px #999999";

The hyphen in box-shadow is causing the JavaScript engine to throw an invalid assignment exception (in Firefox). Doing "box-shadow" or 'box-shadow' doesn't work. Is there a good way around this without using jquery's .css() method?

Answer 1

You can use style["boxShadow"] or style.boxShadow.

document.getElementById("foo").style["boxShadow"] = "0 0 5px #999999";

<div id="foo">12123123</div>

Answer 2

CSS properties with a - are represented in camelCase in Javascript objects. So you dont need a hyphen - just write boxShadow

document.getElementById("shadow").style["boxShadow"] = "0 0 5px #999999";

<div id="shadow">Tushar </div>

Answer 3

Use boxShadow

document.getElementById("imgA").style.boxShadow = "0 0 5px #999999";

Answer 4

document.getElementById('redbox').style.boxShadow = "0 0 3px #000";