如何使用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。

小提琴

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;