How do you set the box-shadow CSS property with JavaScript?

Question

i have some variable like this in JavaScript:

var classattrib = "box-shadow:inset 12px 222px 2px 2px rgba(1,2,111,11);";
target.style['boxShadow'] = classattrib;

or:

target.style['webkitBoxShadow'] = classattrib;

But it is not working

//html

<div id="target">hello</div>

What am I doing wrong?

Answer 1

Don't include the name of the property en the value, try like this:

var classattrib = "inset 12px 222px 2px 2px rgba(1,2,111,11)";
target.style.boxShadow = classattrib;

Answer 2

You could also use jQuery if it is an option.

Fiddle

HTML

<div id="textdiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda repellendus quam exercitationem ullam veniam ab reiciendis pariatur fuga quo id quisquam laudantium ducimus. Fugiat repellendus reprehenderit omnis qui odit unde. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi amet iste inventore quisquam in ut iure dolorum id cupiditate asperiores ullam facere eveniet recusandae harum nihil ex itaque. Possimus voluptatum!</p>
</div>

javaScript

$("#textdiv").css("box-shadow","inset 0px 0px 2px 2px rgba(1,2,111,11)");

Answer 3

If you want to assign the CSS declaration as a string, you should use cssText property as follows:

var classattrib = "box-shadow:inset 12px 222px 2px 2px rgba(1,2,111,11);";
target.style.cssText = classattrib;

Otherwise, you have to pass only the value of box-shadow property as:

var classattrib = "inset 12px 222px 2px 2px rgba(1,2,111,11)";
target.style.boxShadow = classattrib;