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

Question

有大约20个样式的文章(5-10页，每个不一致的部分)，我需要显示在我的应用程序。无需手动为每个组件编写组件，我们已经开始从Google导出HTML，并将其保存在iframe中。虽然这主要是我们所需要的，但有一些不一致的样式和其他变化，我想解决。

我已经开始编写一个JS脚本(node.js)，它将使用所有的HTML文件并尝试正确地格式化它们，但是在找到一个正确的库时会出现问题。

我尝试过使用Jsoup、jsdoc、node解析器，最后使用了cheerio。

我坚持的是针对基于属性的动态生成类并对它们进行更改。例如，我试图对HTML中的上标进行更改，而我唯一要离开的就是属性‘垂直对齐’。

.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循环使用style属性遍历所有元素，然后查看使用内联css的元素中是否包含目标样式。然后可以删除内联样式并应用类。查询选择器越窄，它的性能就越好。

• document.querySelectorAll("[style]");具有样式attribute.
• document.querySelectorAll("div[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未被删除，它将覆盖应用到它的任何类。不过，您最终可能会有相当多的“规则”在此方法基础上应用。