How to set browser specific css in JavaScript?

Question

How to set style -webkit-box-shadow: 0px 0px 11px #000 to an element via JavaScript?

Answer 1

Since I haven't yet seen a code example that works without jQuery, here's one:

document.getElementById("test").style.webkitBoxShadow = "0px 0px 11px #000";

Note that the javascript property is not the same as the CSS property. The javascript properties do not use a dash and use camelCase instead.

And, a working demo here: http://jsfiddle.net/jfriend00/4LT7u/

Answer 2

You can set it using the style object:

element.style['-webkit-box-shadow'] = '0px 0px 11px #000';

Demo: jsfiddle.net/S2eLb/

Edit:

To be clear, this method does not require the jQuery library.

Answer 3

Use CamelCase like this:

WebkitBoxShadow

Generally, a -<lowerCaseLetter> translates to the corresponding uppercase letter in the JS API.

Answer 4

$('#elementname').css({
        '-webkit-box-shadow':'0px 0px 11px #000'})

Answer 5

You can use the .css

$("divClass").css("-webkit-box-shadow","0px 0px 11px #000");

Links: http://api.jquery.com/css/