jQuery 从所有元素中删除样式属性答案

【问题标题】：jQuery Remove style attributes from ALL elementsjQuery 从所有元素中删除样式属性
【发布时间】：2013-03-29 14:31:26
【问题描述】：

我知道如何从单个元素中删除属性，已经有一些关于此的帖子：

$("div.preview").removeAttr("style");

这是html代码：

<div class="preview" style="background-color:white">
   <p>Some text<span style="font-size:15px;">some text</span></p>
   some more code
</div>

问题是这只会从预览 div 中删除样式属性。我想从该 div 内的所有元素中删除。这只是一个例子，在实际场景中会有更广泛的html。

有什么捷径可以做到吗？

更新：太好了，我现在知道该怎么做了。但是，如果将 html 作为存储在变量中的字符串发送给函数会怎样。所以不是

$("div.preview")

我有

var string = '<div class="preview"><p style='font-size:15px;'>....</p><div>'

下面有这样的说法吗？

$(string).find(*).removeAttr("style");

【问题讨论】：

是的，选择 div，选择它的所有子项，将 div 添加回集合中，然后删除类。
$("div.preview, div.preview *").removeAttr("style")

标签： jquery html

【解决方案1】：

您可以使用通配符选择器* 来选择div.preview 下的所有内容。

jsFiddle

$('div.preview *').removeAttr('style');

更新

RE：您的相关问题，如果我们有一个字符串而不是 DOM 元素。我们可以将它们转换为 jQuery 对象，删除上面的属性，然后将它们转换回来（如果需要）。

jsFiddle

// jQuery extension to get an element's outer HTML
// http://stackoverflow.com/a/2419877/1156119
jQuery.fn.outerHTML = function(s) {
    return s
        ? this.before(s).remove()
        : jQuery("<p>").append(this.eq(0).clone()).html();
};

var string = '<div class="preview"><p style="font-size:15px;">....</p><div>'
var elements = $(string);
elements.find('*').removeAttr('style');

var withoutStyles = elements.outerHTML();
alert(withoutStyles);

【讨论】：

Tnx，关于这个话题我还有一个问题。请查看我对这个问题的更新。
用解决方案更新了我的答案。
太棒了。我实际上是在尝试类似的，但我的错误是我在一行中做了所有事情$(string).find('*').removeAttr('style')。不知道为什么这不一样。
在 chrome 中，它只是删除子元素的样式属性，而不是父元素（.preview）

【解决方案2】：

试试：$("div.preview").children().removeAttr("style");

或者：$("div.preview").find("*").removeAttr("style"); 也可以得到孙子。

【讨论】：

这只会得到孩子，不会得到孙子等。

【解决方案3】：

$("div.preview,div.preview *")).removeAttr("style")

【讨论】：

【解决方案4】：

选择 div，选择它的子元素，然后将 div 添加回集合并删除类。

$('div.preview').find('[style]').addBack().removeAttr('style')
// replace addBack with andSelf for older jQuery
// if you don't want to remove it from the preview div, just leave addBack off.

但是从长远来看，修复编辑器可能比修复结果更好。

【讨论】：

【解决方案5】：

你可以试试这个

$("div.preview").find('*').removeAttr("style");

从div.preview的所有子元素中删除样式

【讨论】：

【解决方案6】：

$("div.preview, div.preview *").removeAttr("style");

【讨论】：

【解决方案7】：

尝试这样做

$("#frameDemo").contents().find("#div_id").parent('div').removeAttr('onclick');
$("#frameDemo").contents().find("#div_id").children('div').removeAttr('onclick');

【讨论】：