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

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;

或者：

target.style['webkitBoxShadow'] = classattrib;

但是它没有起作用。

//html

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

我做错了什么？

- Sarthak Shah

---

请勿在字符串值中包含“box-shadow:”（或“;”）。 - Ian

谢谢伙计，它正在运行。 - Sarthak Shah

让我建议添加（或删除）一个在CSS中定义了所需的box-shadow（以及其他任何内容）样式的“class”。这样，您就可以在正确的位置管理样式，并简单地切换“class”。对于具有供应商前缀替代项（如webkit-box-shadow）的样式，这尤其好用。 - Ian

Answer 1

不要在值中包含属性名称，尝试像这样编写：

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

- bugarin

Answer 2

如果您想将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;

- Hashem Qolami

Answer 3

你可以使用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)");

- Cedric Guindon