How to set CSS for browser in JavaScript?

Question

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

Answer 1

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 a jQuery library.

Answer 2

Since I have not yet seen an example of code that works without jQuery, here is one of them:

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

Note that the javascript property does not match the CSS property. Javascript properties do not use dashes and use camelCase instead.

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

Answer 3

You can use .css

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

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

Answer 4

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

Answer 5

Use CamelCase as follows:

 WebkitBoxShadow 

Typically, a -<lowerCaseLetter> converted to the corresponding uppercase letter in the JS API.