如何使用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样式表指定的样式？

Answer 1

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

或

$('div').removeAttr('style');（来自Andres's Answer）

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

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

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

无论哪种方式，如果你有大量的div，这可能需要一段时间来处理，所以你可能想要考虑除javascript之外的其他方法。

Answer 2

普通JavaScript：

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

假设您只是针对单个元素，您可以轻松使用以下内容：(example)

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

如果您要定位多个元素，只需遍历选定的元素集合：(example)

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

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

Answer 3

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

Answer 4

我使用的是$('div').attr('style', '');技术，但它在IE8中无效。

我使用alert()输出了style属性，并没有删除内联样式。

.removeAttr最终在IE8中完成了这个技巧。

Answer 5

如果您只需要清空某个元素的style，那么：element.style.cssText = null;这应该可以。希望它有所帮助！

Answer 6

这可以分两步完成：

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

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

1. 删除样式属性

element.removeAttribute('style');

Answer 7

您还可以尝试将样式表中的css列为！important