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

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

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

这在我的css样式表中:

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

有没有办法,使用javascript / jquery,删除所有内联样式,只留下由CSS样式表指定的样式?

Matt asked 2019-09-11T07:14:23Z
7个解决方案
154 votes

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

要么

$('div[style]').removeAttr('style');(来自Andres的回答)

为了使它更小一点,试试这个:

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

这应该加快一点,因为它检查div有样式属性。

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

Tyler Carter answered 2019-09-11T07:15:06Z
24 votes

普通的JavaScript:

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

假设您只是针对单个元素,您可以轻松使用以下内容:(示例)

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

如果您要定位多个元素,只需遍历选定的元素集合:(示例)

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

.querySelectorAll() - IE9及以上/ .querySelectorAll() - IE 8(部分)IE9及以上。

Josh Crozier answered 2019-09-11T07:15:56Z
22 votes
$('div').removeAttr('style');
andres descalzo answered 2019-09-11T07:16:13Z
3 votes

我使用的是.removeAttr技术,它在IE8中无效。

我使用.removeAttr输出了style属性,它没有剥离内联样式。

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

rtvenge answered 2019-09-11T07:16:50Z
3 votes

如果您只需清空元素的style,那么:
element.style.cssText = null;
这应该做得很好。 希望能帮助到你!

Tushar Shukla answered 2019-09-11T07:17:27Z
1 votes

这可以通过两个步骤完成:

1:通过标记名,ID,类等选择要更改的元素。

element.removeAttribute('style');

  1. 删除样式属性

element.removeAttribute('style');

JRulle answered 2019-09-11T07:18:12Z
-2 votes

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

BoringCode answered 2019-09-11T07:18:38Z
translate from https://stackoverflow.com:/questions/1229688/how-can-i-erase-all-inline-styles-with-javascript-and-leave-only-the-styles-spec