javascript - 如何使用 javascript 擦除所有内联样式并仅保留 css 样式表中指定的样式？

Question

如果我的 html 中有以下内容：

<div style="height:300px; width:300px; background-color:#ffffff;"></div>

这在我的 CSS 样式表中：

div {
    width:100px;
    height:100px;
    background-color:#000000;
}

有没有办法使用 javascript/jquery 删除所有内联样式并只保留 css 样式表指定的样式？

score 168 · Accepted Answer

$('div').attr('style', '');

或者

$('div').removeAttr('style');（来自安德烈斯的回答）

为了让它更小一点，试试这个：

$('div[style]').removeAttr('style');

这应该会加快速度，因为它会检查 div 是否具有样式属性。

无论哪种方式，如果您有大量 div，这可能需要一些时间来处理，因此您可能需要考虑 javascript 以外的其他方法。

score 39 · Accepted Answer

纯 JavaScript：

你不需要 jQuery 来做这样的微不足道的事情。只需使用.removeAttribute()方法。

假设您只针对单个元素，您可以轻松使用以下内容：（示例）

document.querySelector('#target').removeAttribute('style');

如果您要定位多个元素，只需遍历选定的元素集合：（示例）

var target = document.querySelectorAll('div');
Array.prototype.forEach.call(target, function(element){
    element.removeAttribute('style');
});

Array.prototype.forEach()- IE9 及以上/ .querySelectorAll()- IE 8（部分）IE9 及以上。

score 23 · Accepted Answer

23

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

于 2009-08-04T20:35:53.613 回答

score 3 · Accepted Answer

我正在使用该$('div').attr('style', '');技术，但它在 IE8 中不起作用。

我使用输出样式属性alert()，它没有去除内联样式。

.removeAttr最终在 IE8 中成功了。

score 3 · Accepted Answer

这可以分两步完成：

1：通过标记名、id、类等选择要更改的元素。

var element = document.getElementsByTagName('h2')[0];

element.removeAttribute('style');

score 3 · Accepted Answer

如果您只需要清空style一个元素，那么：
element.style.cssText = null;
这应该会很好。希望能帮助到你！

score -2 · Accepted Answer

-2

您也可以尝试将样式表中的 css 列为 !important

于 2010-01-07T23:30:15.217 回答

7 回答 7