是否可以使用jQuery删除内联样式？

jQuery插件正在应用内联样式（display:block）。我很懒，想用来替代它display:none。

最好的（懒惰）方式是什么？

更新：尽管以下解决方案有效，但是有一种更简单的方法。见下文。

这是我想出的，我希望这对您或其他任何人都派上用场：

$('#element').attr('style', function(i, style)
{
    return style && style.replace(/display[^;]+;?/g, '');
});

这将删除该内联样式。

我不确定这是您想要的。您想覆盖它，正如已经指出的那样，它很容易通过来完成$('#element').css('display', 'inline')。

我正在寻找的是一种完全删除嵌入式样式的解决方案。我正在编写的插件需要这个，我必须在其中临时设置一些内联CSS值，但以后要删除它们；我希望样式表重新获得控制权。我可以通过存储所有原始值，然后再将它们放回内联来做到这一点，但是这种解决方案对我来说感觉更干净。

这是插件格式：

(function($)
{
    $.fn.removeStyle = function(style)
    {
        var search = new RegExp(style + '[^;]+;?', 'g');

        return this.each(function()
        {
            $(this).attr('style', function(i, style)
            {
                return style && style.replace(search, '');
            });
        });
    };
}(jQuery));

如果您在脚本之前的页面中包含此插件，则只需调用

$('#element').removeStyle('display');

这应该可以解决问题。

更新：我现在意识到这一切都是徒劳的。您可以简单地将其设置为空白：

$('#element').css('display', '');

它将自动为您删除。

这是来自docs的引文：

将样式属性的值设置为空字符串（例如$('#mydiv').css('color', '')），如果该属性已被直接应用（无论是在HTML样式属性中，通过jQuery的.css()方法还是通过对样式属性的直接DOM操作），则将从元素中删除该属性。但是，它不会删除样式表或<style>元素中已应用CSS规则的样式。

我不认为jQuery在这里发挥了任何作用。看来style对象本身是这样做的。

.removeAttr("style") 摆脱整个样式标签...

.attr("style") 测试值并查看是否存在内联样式...

.attr("style",newValue) 设置为其他

删除内联样式（由jQuery生成）的最简单方法是：

$(this).attr("style", "");

内联代码应消失，并且您的对象应采用CSS文件中预定义的样式。

为我工作！

您可以使用jQuery的css方法设置样式：

$('something:visible').css('display', 'none');

您可以这样创建一个jquery插件：

jQuery.fn.removeInlineCss = (function(){
    var rootStyle = document.documentElement.style;
    var remover = 
        rootStyle.removeProperty    // modern browser
        || rootStyle.removeAttribute   // old browser (ie 6-8)
    return function removeInlineCss(properties){
        if(properties == null)
            return this.removeAttr('style');
        proporties = properties.split(/\s+/);
        return this.each(function(){
            for(var i = 0 ; i < proporties.length ; i++)
                remover.call(this.style, proporties[i]);
        });
    };
})();

用法

$(".foo").removeInlineCss(); //remove all inline styles
$(".foo").removeInlineCss("display"); //remove one inline style
$(".foo").removeInlineCss("color font-size font-weight"); //remove several inline styles

懒惰的方式（这将使未来的设计师诅咒您的名字并在您的睡眠中谋杀您）：

#myelement 
{
    display: none !important;
}

免责声明：我不提倡这种方法，但这当然是懒惰的方法。

$('div[style*=block]').removeAttr('style');

$("[style*=block]").hide();

如果要删除样式属性内的属性（而不仅仅是将其设置为其他属性），请使用以下removeProperty()方法：

document.getElementById('element').style.removeProperty('display');

更新：
我进行了一个交互式提琴，以尝试使用不同的方法及其结果。显然set to empty string，set to faux value和之间没有太大区别removeProperty()。它们都会导致相同的后备–这是预先提供的CSS规则或浏览器的默认值。

如果display是样式中的唯一参数，则可以运行以下命令以删除所有样式：

$('#element').attr('style','');

意味着如果您的元素之前看起来像这样：

<input id="element" style="display: block;">

现在，您的元素将如下所示：

<input id="element" style="">

这是我写的一个inlineStyle选择器过滤器，它可以插入jQuery。

$("div:inlineStyle(display:block)") // will select all divs with an inline style of display: block set

在您的情况下，您可以这样使用：

$("div:inlineStyle(display:block)").hide();

更改插件以不再应用样式。这比之后删除样式要好得多。

$el.css({ height : '', 'margin-top' : '' });

等等...

只需将第二个参数留空！

$("#element").css({ display: "none" });

最初，我尝试删除CSS中的内联样式，但是它不起作用，并且新样式如display：不会覆盖任何样式。但是在JQuery中，它的工作原理是这样的。

我对width属性有类似的问题。我无法从代码中删除！important，并且由于它需要在新模板上使用此样式，因此我向该元素添加了一个Id（模态样式），然后我向该模板中添加了以下代码：

<script type="text/javascript">
    $('#modalstyling').css('width', '');    //Removal of width !important
    $('#modalstyling').width('75%');        //Set custom width
</script>