CODEWITHSUNDEEP
javascriptwebkit
Ethannn
Ethannn

Reputation: 191

How to assign webkit styles to an element in Javascript

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';

Upvotes: 1

Views: 68

Answers (2)

user2226755
user2226755

Reputation: 13157

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;

Upvotes: 1

Jaromanda X
Jaromanda X

Reputation: 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

Upvotes: 1

Related Questions