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

Question

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

最好(懒人)的方法是什么？

- Haroldo

---

在 Stack Overflow 上寻求帮助 :) - Dave Swersky

最好的方式和懒惰的方式不一定相同。 - Joel

我经常听到这样的论点，即最好的开发人员是懒惰的... http://blog.codinghorror.com/how-to-be-lazy-dumb-and-successful/ - kaelle

Answer 1

更新：虽然以下解决方案可行，但有一种更简单的方法。请参见下文。

---

这是我想出来的方法，希望对您或其他任何人有所帮助：

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

根据文档所述：

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

我认为jQuery并没有进行任何魔法；似乎原生的style对象就可以实现这个功能。

- Joseph Silber

---

@ximi - 谢谢伙计。我一直在考虑这件事，我决定这不是浪费时间。这可以用来检查内联样式，目前jQuery没有支持内联样式（.css('property') 可以获取值，但无法告诉你它是否来自内联样式）。 - Joseph Silber

@Jonz - 它是官方文档记录的（虽然我不知道添加时间; 当我最初发布这篇文章时，我记不起来在那里看到它）。此外，我不认为jQuery在这里做任何事情。本地的style对象似乎表现方式相同。我用这个信息修改了我的答案。 - Joseph Silber

为什么不直接使用 $('#element').css('display', '')？ - Joseph Silber

如果样式未定义，我会收到一个错误提示。建议在返回style.replace(search, '')之前添加if(typeof(style)!=="undefined")。 - Hamboy75

$('#element').css('width', ''); FTW$('#element').css('width', ''); 万岁 - Joe Johnston

Answer 2

使用 .removeAttr("style") 可以直接移除整个 style 标签...

使用 .attr("style") 可以获取并测试其值，看是否存在内联样式...

使用 .attr("style",newValue) 可以将其设置为其他内容。

- heisenberg

---

这将影响所有的内联样式，而不仅仅是 display。 - SLaks

好的，我会试一下并告诉你结果。通常我不使用内联样式，所以很高兴能清除所有内联样式。 - Haroldo

@Slaks，嗯，这就是我所说的“去掉整个样式标签”的意思;) - heisenberg

你好。有没有一种方法可以检查是否已经应用了某些“样式”到 $（'*'）中，来自任何来源，例如内联样式，字体、b、strong、css 文件等，然后再尝试删除/重置任何内容或者一次性重置所有内容？ - Milche Patern

由于单独删除每个内联样式并不会删除（现在为空的）“style”属性，因此这仍然值得注意。 - Brilliand

Answer 3

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

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

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

对我起作用！

- Rick van 't Wout Hofland

Answer 4

你可以像这样创建一个 jQuery 插件：

jQuery.fn.removeInlineCss = function (properties) {
  if (properties == null) return this.removeAttr('style')
  properties = properties.split(/\s+/)
  return this.each(function () {
    for (var i = 0; i < properties.length; i++)
      this.style.removeProperty(properties[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

- Yukulélé

---

这个答案包含了一个非常简洁的一行代码技巧，即使没有使用jQuery也很有用，而且不是所有开发人员都知道——调用elem.style.removeProperty('margin-left')将从style属性中仅删除margin-left（并返回该属性的值）。对于IE6-8，应使用elem.style.removeAttribute()。 - craigpatik

Answer 5

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

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

- SLaks

---

@Kobi：他在询问任何内联样式。 - SLaks

错误，什么？我可能不理解某些东西。我在思考<div style="display:block;">，$('div').hide()。 - Kobi

@Kobi: hide 隐藏的是修改内联样式的一个特殊情况，而这个答案则涵盖了所有情况。（hide/show 也有一个限制，只能在两个值之间切换，即 none->block 或 none->inline。） - Joel

@Joel：hide / show会记住display的旧值并正确恢复它。 - SLaks

@SLaks：很酷。这一定是最近添加的，因为我记得以前用它时有些困难。 - Joel

@Joel: http://api.jquery.com/hide/：匹配的元素将立即隐藏，没有动画效果。这大致等同于调用.css('display', 'none')，除了显示属性的值被保存在jQuery的数据缓存中，以便稍后将显示恢复到其初始值之外。如果元素的显示值为内联，则隐藏并显示它，它将再次以内联方式显示。 - SLaks

Answer 6

懒人做法（会导致未来的设计师咒骂你的名字并在你睡觉时谋杀你）：

#myelement 
{
    display: none !important;
}

免责声明：我不倡导这种做法，但它确实是一种懒惰的方式。

- Joel

---

这显然是对问题的最佳答案，因为它符合“懒惰”这种不良实践的精神。干杯！ - ktamlyn

Answer 7

如果你想要在样式属性中删除一个属性，而不仅仅是将其设置为其他值，你可以使用removeProperty()方法：

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

---

更新:
我制作了一个交互式示例，以便尝试不同的方法及其结果。显然，“设置为空字符串”、“设置为假值”和“removeProperty()”之间没有太大区别，它们都产生相同的回退 - 这是预先给定的CSS规则或浏览器的默认值。

- WoodrowShigeru

Answer 8

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

- David Morton

Answer 9

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

- antpaw

---

$('div[style]').removeAttr('style'); 这样怎么样？ - skybondsor

@skybondsor只是想把它从块状元素中删除，而不是完全删除。 - antpaw

啊，是的。我以为他想要从所有地方移除内联样式。 - skybondsor

Answer 10

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

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

意思是，如果你的元素之前是这样的：

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

现在你的元素会像这样：

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

- paulalexandru