在 Node.js 中更改动态生成的 HTML 文件中的 CSS

Question

我需要在我的应用程序中显示大约 20 篇样式化的文章（每篇 5-10 页，部分内容不一致）。 无需为每个组件手动编写组件，我们已经开始从托管它们的 Google Doc 导出 HTML 并显示在 iframe 中。 虽然这主要满足了我们的需求，但我想解决一些不一致的样式和其他更改。

我已经开始编写一个 JS 脚本 (node.js)，它将使用所有 HTML 文件并尝试正确格式化它们，但在找到正确的库来执行此操作时遇到问题。

我尝试过使用Jsoup、jsdoc、node-html-parser，最后登陆cheerio。

我坚持的是基于它们的属性来定位动态生成的类并更改它们。 例如，我正在尝试对 HTML 中的上标进行更改，而我唯一需要做的就是属性“vertical-align”。

.c3 {
    vertical-align: super;
    font-size: 10pt;
}

请注意，类 c3 是动态生成的，因此我们无法从中搜索。 但基本上我想定位它，然后将所有类属性更改为：

 .c3 {
    font-size: 6pt;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
 }

有没有人对如何处理这样的事情有任何建议？ 我必须在脚本中做一些更复杂的事情，比如目标 img 元素，并修改这些元素及其父元素的类。 任何图书馆建议都将不胜感激，因为 Jquery 似乎不是合适的工具。

注意：CSS 在标签内的 HTML 文件中是内联的

Answer 1

“注意：CSS 在标签内的 HTML 文件中是内联的”

基于此，一种方法是使用querySelectorAll遍历具有样式属性的所有元素，然后查看是否有任何具有内联 css 的元素包含目标样式。 然后，您可以删除内联样式并应用一个类。 您越能缩小查询选择器的范围，它的性能就越好。

• document.querySelectorAll("[style]"); 所有具有样式属性的元素。
• document.querySelectorAll("div[style]"); 所有具有 style 属性的 div 元素。

 var elements = document.querySelectorAll("[style]"); for (let i = 0; i < elements.length; i++) { style = elements[i].getAttribute("style"); if (style.includes("vertical-align")) { console.log( elements[i].getAttribute("style") ); //original elements[i].removeAttribute("style"); elements[i].classList.add("replacementClass"); console.log( elements[i].getAttribute("style") ); //empty // or instead of a class if you want to just update the style elements[i].setAttribute('style','font-size: 6pt; vertical-align: baseline; position: relative; top: -0.4em;'); console.log( elements[i].getAttribute("style") ); //inline } }

 .replacementClass { font-size: 6pt; vertical-align: baseline; position: relative; top: -0.4em; }

 <span id="test" style="vertical-align: super; font-size: 10pt;">oh boy</span>

删除内联样式可能是唯一的方法，因为如果不删除内联 CSS，它将覆盖您应用到它的任何类。 不过，您最终可能会根据此方法应用很多“规则”。