`.cssText`

Question

我正在尝试寻找一种清除每个DOM元素上以前更改的样式属性的聪明方法。

我知道有一种方法可以清除这样的样式（保证金只是一个示例属性）：

element_name.style.margin = "";

以这种方式清除具有许多样式属性的许多元素将花费很多时间，因此我希望有一些“ all_at_once”解决方案。

Answer 1

您可以使用

获得所有元素

document.querySelectorAll("*")

您将获得一个object，其中所有elements的编号为keys。 Object.keys将为您提供所有键的数组，并使用forEach可以迭代并将样式或任何操作应用于元素。

var elem = document.querySelectorAll("*");
Object.keys(elem).forEach((e)=>elem[e].style.margin = "32px")

<div>scscs</div>

这也可以使用

document.getElementsByTagName("*");

var elem = document.getElementsByTagName("*");
Object.keys(elem).forEach((e)=>elem[e].style.margin = "")

<div>scscs</div>

由于@ScottMarcus在评论中提到的性能问题，不应使用document.getElementsByTagName("*");

Answer 2

这将清除所有标签的样式：

const tags = document.querySelectorAll("*");

for (let i of tags) {
     i.style = '';
}

<div style="background-color: beige">
  <span style="color: red">Hello</span>
  <p style="world">World</p>
</div>

您还可以使用i.removeAttribute('style');删除style属性。

Answer 3

`.cssText`

.cssText将.style的整个值视为一个字符串：

document.documentElement.querySelectorAll('*').forEach(tag => tag.style.cssText = '');

此表达式将收集<html>标记内的所有标记，并覆盖所有.style属性。

演示

document.documentElement.querySelectorAll('*').forEach(tag => tag.style.cssText = '');

<div style='color:red'>RED</div>
<div style='color:red'>RED</div>
<div style='color:red'>RED</div>
<div style='color:red'>RED</div>
<div style='color:red'>RED</div>
<div style='color:red'>RED</div>
<div style='color:red'>RED</div>
<div style='color:red'>RED</div>
<div style='color:red'>RED</div>
<div style='color:red'>RED</div>
<div style='color:red'>RED</div>

Answer 4

您必须删除内联样式并禁用样式表：

function clearStyles() {
  // remove inline styles:
  document.querySelectorAll('*').forEach(e => e.style = null);

  // disable stylesheets:
  Object.values(document.styleSheets).forEach(v => v.disabled = true);
}

h1 {
  color: pink
}

<h1 style="background:navy">My color was set in stylesheet<br>and background was set inline</h1>
<button onclick="clearStyles()">Clear styles</button>

每个DOM元素上的样式清晰

4 个答案:

`.cssText`

演示