【问题标题】:Change drop-shadow with Javascript without jQuery使用没有 jQuery 的 Javascript 更改阴影
【发布时间】:2016-04-25 20:03:25
【问题描述】:

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

我想用 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">

【问题讨论】:

  • 看看我的回答,它应该适合你。

标签: javascript css drop-shadow


【解决方案1】:

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/

【讨论】:

    【解决方案2】:

    试试这个:

    var elt = document.getElementById("#your-element-id");
    
    elt.setAttribute("style", "-webkit-filter: drop-shadow(5px 5px 5px #222);");
    

    【讨论】:

    • 当我使用 elt.style.transform 旋转带有阴影的图像时,当前不工作
    • @Uzbekjon 不过,您应该避免覆盖style 属性一般
    • 我的问题已修改。
    • 我理解并同意。我是说我们不知道对 elt.style 的任何其他调用...
    猜你喜欢
    • 1970-01-01
    • 2017-08-13
    • 2016-11-04
    • 2021-02-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-01-09
    • 2013-05-25
    相关资源
    最近更新 更多