How to assign webkit styles to an element in Javascript

Question

I am trying to assign webkit styles to an element but can not get it to work. This is what I need to assign:

-webkit-box-shadow:inset 0px 0px 0px 10px #f00;
-moz-box-shadow:inset 0px 0px 0px 10px #f00;
box-shadow:inset 0px 0px 0px 10px #f00;

This is what I have tried:

document.getElementById("EL").style.webkitBoxShadowInset = '0px 0px 0px 10px #f00';
document.getElementById("EL").style.mozBoxShadowInset = '0px 0px 0px 10px #f00';
document.getElementById("EL").style.boxShadowInset = '0px 0px 0px 10px #f00';

The rules name aren't valid.

user2226755
– user2226755

2015-10-18 11:11:19 +00:00
Commented Oct 18, 2015 at 11:11 — user2226755
– user2226755, Commented Oct 18, 2015 at 11:11

Jaromanda X · Accepted Answer · 2015-10-18 10:42:17Z

1

document.getElementById("EL").style.WebkitBoxShadow = 'inset 0px 0px 0px 10px #f00';
document.getElementById("EL").style.MozBoxShadow = 'inset 0px 0px 0px 10px #f00';
document.getElementById("EL").style.boxShadow = 'inset 0px 0px 0px 10px #f00';

note the capitalization of Webkit* and Moz* and the location of the word inset

answered Oct 18, 2015 at 10:42

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jaromanda X Over a year ago

I was about to expand the answer to explain what you did wrong, do you need that explanation?

user2226755 · Accepted Answer · 2015-10-18 11:10:43Z

1

You can optimise the result :

var el = document.getElementById("EL"),
    bS = 'inset 0px 0px 0px 10px #f00';

el.style.WebkitBoxShadow = el.style.MozBoxShadow = el.style.boxShadow = bS;

answered Oct 18, 2015 at 11:10

user2226755

13.3k6 gold badges55 silver badges77 bronze badges

Collectives™ on Stack Overflow

How to assign webkit styles to an element in Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related