如何使用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是否具有style属性。

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

Answer 2

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

Answer 3

您也可以尝试上市样式表的CSS！重要

Answer 4

我用的是$('div').attr('style', '');技术，它是不是在IE8工作。

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

.removeAttr最终在IE8中诀窍。

Answer 5

普通的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及以上。

1：选择您想以任何标记名要更改的元素，ID，类等

Answer 6

这可以分两步来完成

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

除去风格属性

element.removeAttribute('style');

Answer 7

如果需要只是空的，则一个元素的style：
element.style.cssText = null;
这应该做得很好。希望能帮助到你！