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

【问题标题】：Is it possible to remove inline styles with jQuery?是否可以使用 jQuery 删除内联样式？
【发布时间】：2011-01-28 17:45:14
【问题描述】：

一个 jQuery 插件正在应用内联样式 (display:block)。我感觉很懒，想用display:none 覆盖它。

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

【问题讨论】：

在 SO 上寻求帮助 :)
最佳方式和懒惰方式不一定相同。
我经常听到这样的论点，即最好的开发人员都很懒惰...blog.codinghorror.com/how-to-be-lazy-dumb-and-successful

标签： jquery

【解决方案1】：

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

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

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

【讨论】：

这将影响所有内联样式，而不仅仅是display。
听起来不错，试一试告诉你，我通常从不使用内联样式，很高兴清除所有内联样式
@Slaks 好吧，这就是我所说的“摆脱整个样式标签”的意思；）
嗨。有没有办法检查某些“样式”是否已应用于 ... $('*') ，来自任何来源，如内联样式，样式属性如 font,b,strong,css 文件 .. 在尝试之前删除/重置任何东西或只是简单地重置所有镜头？
由于单独删除每个内联样式并不会删除（现在为空的）style 属性，这仍然值得注意。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

$('div[style]').removeAttr('style'); 怎么样？
@skybondsor 不会只删除块元素，就像他想要的那样
啊，是的。我以为他想从所有内容中删除内联样式。

【解决方案4】：

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

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

【讨论】：

@Kobi：他在询问任何内联样式。
错了，什么？我可能不明白一些事情。我在考虑<div style="display:block;">，$('div').hide()。
@Kobi: hide 解决了修改内联样式的一种特殊情况。这个答案适用于所有情况。（hide/show 也有一个限制，因为两个值可以切换。即 none->block 或 none->inline。）
@Joel: hide / show 会记住 display 的旧值并正确恢复。
@SLaks：酷。那肯定是最近添加的，因为我记得以前遇到过麻烦。

【解决方案5】：

懒惰的方式（这将导致未来的设计师诅咒你的名字并在你睡梦中谋杀你）：

#myelement 
{
    display: none !important;
}

免责声明：我不提倡这种做法，但肯定是懒惰的做法。

【讨论】：

这显然是这个问题的最佳答案，因为它本着“懒惰”的坏习惯。干杯！

【解决方案6】：

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

【讨论】：

因此是“懒惰”！懒得去查是哪个插件的哪一点！
我不知道你怎么定义懒惰，我只是回答了我会怎么做。解决问题的根源似乎是有意义的，而不是修补插件之外的东西。我预见到这样做会很混乱。
哪种方式？如果您编辑插件，您可能会在更新到新版本后遇到问题，这将覆盖您的更改并弄乱布局。谁会在一年左右的时间里记得你在那里做了一点小小的调整？除了修改插件源代码，我总是尝试寻找其他解决方案

【解决方案7】：

更新：虽然以下解决方案有效，但还有一种更简单的方法。见下文。

这是我想出的，我希望这对你或其他人有用：

$('#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', '');

它会自动为您删除。

这是来自the docs的引述：

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

我不认为 jQuery 在这里有什么神奇之处； it seems the style object does this natively.

【讨论】：

@ximi - 谢谢。我一直在考虑这个问题，我认为这不是浪费时间。它可以用于检查内联样式，目前在 jQuery 中不支持（.css('property') 为您提供值，但它不会告诉您它是否来自内联样式）。
我独立得出了同样的结论——空字符串似乎正是我们想要的。它没有正式记录在 API 中，但希望能继续工作。
@Jonz - 它被正式记录（虽然我不知道它是什么时候添加的；我不记得当我最初发布这个时看到它）。另外，我不认为 jQuery 在这里做任何事情。本机style 对象似乎以相同的方式运行。我用这些信息修改了我的答案。
这是否适用于字体系列之类的东西，或者是否 - 弄乱了正则表达式？
@mosh - 你为什么不直接使用$('#element').css('display', '')？

【解决方案8】：

这是一个插入 jQuery 的inlineStyle selector filter I wrote。

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

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

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

【讨论】：

【解决方案9】：

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

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

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

为我工作！

【讨论】：

【解决方案10】：

你可以像这样创建一个 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

【讨论】：

这个答案包含一个非常简洁的单行技巧，即使没有 jQuery，它也很有用，而且可能没有多少开发人员知道——调用 elem.style.removeProperty('margin-left') 只会从 style 属性中删除 margin-left（并返回该属性的值）。对于 IE6-8，它是 elem.style.removeAttribute()。

【解决方案11】：

如果显示是您样式中唯一的参数，您可以运行此命令以删除所有样式：

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

表示如果您的元素以前看起来像这样：

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

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

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

【讨论】：

【解决方案12】：

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

等等……

只需将第二个参数留空！

【讨论】：

如果你们投了反对票，请发表评论。
我猜你得到了反对票，因为你没有回答提出的问题："jQuery plugin is applying an inline style (display:block). I'm feeling lazy and want to override it with display:none"。尽管您的文字是正确的，但您的代码并不能解决问题。
解决了我的问题。 Tnx。

【解决方案13】：

如果你想删除样式属性中的一个属性——不仅仅是将它设置为其他东西——你可以使用removeProperty()方法：

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

更新：
我制作了一个交互式fiddle 来玩弄不同的方法及其结果。显然，set to empty string、set to faux value 和removeProperty() 之间没有太大区别。它们都会产生相同的回退——要么是预先给定的 CSS 规则，要么是浏览器的默认值。

【讨论】：

【解决方案14】：

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

一开始我尝试在 css 中删除内联样式，但它不起作用，并且新样式如 display: none 将被覆盖。但是在 JQuery 中它是这样工作的。

【讨论】：

【解决方案15】：

宽度属性也有类似的问题。我无法从代码中删除 !important，因为它需要在新模板上使用这种样式，所以我在元素中添加了一个 Id（模态样式），然后我在模板中添加了以下代码：

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

【讨论】：