使用 Javascript 而不使用 jQuery 更改阴影

Question

我想在 JavaScript 中添加样式 -webkit-filter: drop-shadow(5px 5px 5px #222); 而没有 jQuery。

我想使用 CSS 变换为 png 透明图像持续时间创建阴影。

此代码无法正常工作：

var scscsc = document.getElementById('scscsc');
scscsc.setAttribute("style", "-webkit-filter: drop-shadow(5px 5px 5px #222);");
scscsc.style.transform = "rotate(216deg)";

body {
  margin: 0px;
  padding: 0px;
  text-align: center;
}
img {
  position: absolute;
  top: 0;
  left: 0;
}

<img src="http://sirati.info/tmp/ss.png" id="scscsc">

Answer 1

试试这个：

var elt = document.getElementById("#your-element-id");

elt.setAttribute("style", "-webkit-filter: drop-shadow(5px 5px 5px #222);");

Answer 2

Uzbekjon 的回答只有在您使用的唯一 CSS 属性时才有效。最好使用元素的 style 属性设置内联 CSS，如下所示：

var elt = document.getElementById("#your-element-id");

elt.style.setProperty("-webkit-filter", "drop-shadow(5px 5px 5px #222)");

编辑：这是一个有效的 JSfiddle，演示了它的工作原理

https://jsfiddle.net/w4n024b4/

使用 Javascript 而不使用 jQuery 更改阴影

Change drop-shadow with Javascript without jQuery

javascript

css

drop-shadow