删除所有子元素的字体大小和其他内联样式并替换

Question

页面将在具有已知类(摘要(的div中包含随机div、p、span和其他嵌套元素。这些数据是从word和其他程序粘贴的，所以可能包含我想要覆盖的样式。由于有多个级别，并且下一个div的名称是随机的！important无法覆盖内联样式。我的想法是使用javascript来选择所有的子项，去掉样式，然后应用我自己的样式。这可能吗？如果是的话，你能给我举一个函数的例子吗？

以下是页面上的代码示例：

<div class="ExternalClass251DEFD3BA2542E59F9D13DD7BCEC24A">
<div style="box-sizing:border-box;font-family:&quot;Segoe UI&quot;, system-ui, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, sans-serif;font-size:14.6667px;orphans:2;widows:2;">
<span style="font-size:10.5pt;">
<span>
<span>
<span>
<span>This web page was updated to add the <i>other random text </i>
<span style="font-size:11pt;">
<span>
<span style="font-size:10.5pt;">
<span>
<span>
<span>
<span>more text here </span>
</span>
</span>
</span>
</span>
</span>
</span>
and some <b>other text here</b> section.
</span>
</span>
</span>
Here is the summary of
</span>
</span>
<span>
the property evaluation process. 
</span>
</div>
</div>
</div>

以下是我尝试过的：

function removeStyles(el) {
el.removeAttribute('style');
if(el.childNodes.length > 0) {
for(let child in el.childNodes) {
/* filter element nodes only */
if(el.childNodes[child].nodeType == 1)
removeStyles(el.childNodes[child]);
}
}
}

但这删除了所有的样式，而我只是想从某些div中删除它。

Answer 1

首先，让我们假设您将要获得的所有标签都将位于名为.container的div中。

我们假设.container内部的元素是元素的混合，即：<p>、<span>、<div>、<ul>、<li>等

您可以使用query.selectorAll方法返回节点列表，使用如下示例：

// 1. get all the elements inside .container and spread them in an array (NodeList --> Array)
const elements = [...document.querySelectorAll('.container *')]
// 2. apply the style x for all the elements
elements.forEach((el) => {
el.style.color = "red"
})

<div class="container">
<div>
nested div#1 layer 1
</div>
<div>
nested div#2 layer 1
<p>
nested p layer 2
</p>
</div>
<div>
nested div#3 layer 1
<div>
nested div layer 2
<div>
nested div layer 3
<div>
nested div layer 4
<span>nested span#1 layer 4</span>
<span>nested span#2 layer 4</span>
<span>nested span#3 layer 4</span>
</div>
</div>
</div>
</div>
</div>