如何使用.style JavaScript属性添加css box-shadow

Question

我有以下JavaScript代码段：

document.getElementById("imgA").style.box-shadow = "0 0 5px #999999";

box-shadow中的连字符导致JavaScript引擎抛出无效的赋值异常（在Firefox中）。执行"box-shadow"或'box-shadow'并不起作用。如果不使用jquery的.css()方法，有没有一个很好的解决方法？

Answer 1

您可以使用style["boxShadow"]或style.boxShadow。

＆＃13;

＆＃13;

document.getElementById("foo").style["boxShadow"] = "0 0 5px #999999";

＆＃13;

<div id="foo">12123123</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

具有camelCase的CSS属性在Javascript个-个对象中表示。所以你不需要连字符boxShadow只需写document.getElementById("shadow").style["boxShadow"] = "0 0 5px #999999";

＆＃13;

＆＃13;

<div id="shadow">Tushar </div>

＆＃13;

--enable-experimental

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用boxShadow

document.getElementById("imgA").style.boxShadow = "0 0 5px #999999";

Answer 4

document.getElementById('redbox').style.boxShadow = "0 0 3px #000";

Answer 5

这应该有用。

document.getElementById("demo").style.boxShadow = "0 0 5px #999999";

Answer 6

如果要为元素动态添加阴影，请在该元素中添加“.shadow”类。

CSS：

.shadow {
  -webkit-box-shadow: 0 0 5px #999999;
  -moz-box-shadow: 0 0 5px #999999;
  box-shadow: 0 0 5px #999999;
}

jQuery的：

$('.redbox').addClass('.shadow');