Change drop-shadow with Javascript without jQuery

Question

I want to add the style -webkit-filter: drop-shadow(5px 5px 5px #222); in JavaScript without jQuery.

I want create a shadow for png transparent image duration with CSS transform.

This code is not working correctly:

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">

Check out my answer, it should work for you. – PitaJ Apr 25 '16 at 21:58 — PitaJ, Apr 25 '16 at 21:58

PitaJ · Accepted Answer · 2016-04-25T21:57:37.863

2

Uzbekjon's answer will only work if that is the only CSS property you are using. It's preferable to set inline CSS using the style property of the element like so:

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

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

Edit: here is a working JSfiddle demonstrating this works

https://jsfiddle.net/w4n024b4/

edited Apr 25 '16 at 21:57

answered Apr 25 '16 at 20:10

PitaJ

12,969
6
36
55

score 0 · Answer 2 · answered Apr 25 '16 at 20:05

0

Try this:

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

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

answered Apr 25 '16 at 20:05

Uzbekjon

11,655
3
37
54

not worked currently when i use elt.style.transform for rotate this image with shadow – AMir Sirati Apr 25 '16 at 20:14
1

@Uzbekjon Still, you should avoid overriding the `style` attribute _in general_. – Sebastian Simon Apr 25 '16 at 20:19
my question modified. – AMir Sirati Apr 25 '16 at 20:21
I understand that and agree. I'm saying we don't know about any other calls to elt.style... – Uzbekjon Apr 25 '16 at 20:23

Change drop-shadow with Javascript without jQuery

2 Answers2