Question

当用户点击box-shadow链接时，我在div.wrapper上设置了内联#menu-open样式。这将覆盖通过样式表应用的默认CSS样式。这是有效的。

但是，当用户单击#menu-close链接时，我还希望能够删除该内联样式，以便我们默认返回CSS文件中的样式。

我目前有以下内容;

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

我还尝试removeAttr('style');和attr('style', '');但没有成功。

Answer 1

试试这个。

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

Demo Fiddle

Answer 2

来自jQuery 1.8+你可以简单地使用（crossbrowser）而不使用特定于供应商的前缀。这个：

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

要删除它，请使用：

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

<强> Working Demo

Answer 3

在这里工作正常http://jsfiddle.net/7haVh/

您需要准备好您的代码：

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', '');
});
});

无法使用jQuery删除或更新内联样式

3 个答案: