如何使用JavaScript设置box-shadow CSS属性？

Question

我在JavaScript中有这样的变量：

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

或：

target.style['webkitBoxShadow'] = classattrib;

但它不起作用

// HTML

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

我做错了什么？

Answer 1

不要在值中包含属性的名称，请尝试这样：

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

Answer 2

如果是一个选项，你也可以使用jQuery。

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

如果要将CSS声明指定为字符串，则应使用cssText属性，如下所示：

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

否则，您必须仅将box-shadow属性的值传递为：

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