Can't remove or update inline style with jQuery

Question

I'm setting an inline box-shadow style on a div.wrapper when a user clicks a #menu-open link. This overrides a default CSS style that is applied via the stylesheet. That is working.

However I also want to be able to remove that inline style when the user clicks the #menu-close link so that we then default back to the style in the CSS file.

I currently have the following;

<p id="menu-open">...</p>
<p id="menu-close">...</p>

<div class="wrapper">...</div>

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('#menu-open').click(function(){
            jQuery('.wrapper').css('box-shadow', '0 0 3px rgba(0,0,0,0.75)');
        });
        jQuery('#menu-close').click(function(){
            jQuery('.wrapper').css('box-shadow', '');
        });
    });
</script>

I've also tried removeAttr('style'); and attr('style', ''); with no success.

score 1 · Accepted Answer · answered Mar 27 '14 at 12:00

1

Try this.

jQuery('#menu-close').click(function(){
    jQuery('.wrapper').removeAttr('style');
});

Demo Fiddle

answered Mar 27 '14 at 12:00

Rakesh Kumar

2,705
1
19
33

1

As I mentioned in my OP, I've tried `removeAttr` with no success. – Steve Perry Mar 27 '14 at 12:20

Milind Anantwar · Answer 2 · 2014-03-27T12:11:04.933

0

from jQuery 1.8+ you can simply use (crossbrowser) without using vendor specific prefixes.try this:

  jQuery('.wrapper').css({ boxShadow: '0 0 3px rgba(0,0,0,0.75)'});

for removing it,use:

  jQuery('.wrapper').css({ boxShadow: ''});

Working Demo

edited Mar 27 '14 at 12:11

answered Mar 27 '14 at 12:04

Milind Anantwar

81,290
25
94
125

1

why are you saying that? The OP hasn't used vendor prefixes. – Bhojendra Rauniyar Mar 27 '14 at 12:12
because `boxShadow` css property is provided in jquery 1.8.3 that handles all browser prefixes.using `css('box-shadow')` may not work in some browser. – Milind Anantwar Mar 27 '14 at 12:15

score 0 · Answer 3 · answered Mar 27 '14 at 12:10

0

Works fine here http://jsfiddle.net/7haVh/

You need to put your code inside ready:

jQuery(document).ready(function(){
jQuery('#menu-open').click(function(){
    jQuery('.wrapper').css('box-shadow', '0 0 3px rgba(0,0,0,0.75)');
});
jQuery('#menu-close').click(function(){
    jQuery('.wrapper').css('box-shadow', '');
});
});

answered Mar 27 '14 at 12:10

Bhojendra Rauniyar

83,432
35
168
231

Your fiddle works perfectly fine, exactly as I need, but it's still not removing the style for me even when wrapped in `ready`. – Steve Perry Mar 27 '14 at 12:22
You have not wrapped your script inside script tag. – Bhojendra Rauniyar Mar 27 '14 at 13:54
It was wrapped in the correct tags however that wasn't shown, sorry. I've updated the OP to show the full code. – Steve Perry Mar 27 '14 at 14:14

Can't remove or update inline style with jQuery

3 Answers3