CODEWITHSUNDEEP
jquerycss
JustaN00b
JustaN00b

Reputation: 317

Removing box shadow from element using jquery

I'm trying to remove the box shadow from an element which I defined in css like this:

.pagewrap .page { moz-box-shadow:0 1px 2px #fff,0 -1px 1px #666,inset 0 -1px 1px rgba(0,0,0,0.5),inset 0 1px 1px rgba(255,255,255,0.8);-webkit-box-shadow:0 1px 2px #fff,0 -1px 1px #666,inset 0 -1px 1px rgba(0,0,0,0.5),inset 0 1px 1px rgba(255,255,255,0.8);box-shadow:0 1px 2px #fff,0 -1px 1px #666,inset 0 -1px 1px rgba(0,0,0,0.5),inset 0 1px 1px rgba(255,255,255,0.8); }

I use the following jquery to get rid of the box shadow, but that doesn't seem to work:

$('.pagewrap .page').css({'-webkit-box-shadow' : '', 'moz-box-shadow' : '', 'box-shadow' : ''});

What am I doing wrong here? Thanks.

Upvotes: 3

Views: 4540

Answers (2)

Josh Harrison
Josh Harrison

Reputation: 5994

To override these styles, you need to explicitly specify 'none' instead of just '':

$('.pagewrap .page').css({'-webkit-box-shadow' : 'none', '-moz-box-shadow' : 'none', 'box-shadow' : 'none'});

This works: http://jsfiddle.net/8PV5v/

And as Frédéric points out, moz-box-shadow should be -moz-box-shadow - replace this everywhere you've used it.

Upvotes: 10

Bilal
Bilal

Reputation: 2673

Try like this

$(".pagewrap .page").css("box-shadow", "none");

Upvotes: 2

Related Questions