有没有办法把一个部分用Javascript设计的网页变成纯HTML和CSS？

我有一个带有HTML组件的React网页，其中一些是用CSS设计的，另一些是用javascript设计的。我想要的是带有内联CSS的HTML代码，它完全复制了要在电子邮件中发送的页面的外观

我知道我可以用类似的包内联CSS，但我想知道是否有可能以某种方式将js定义的Glamer样式转换为普通CSS并内联

---

如果这是不可能的，那么我可能会探索一个不同的路线，拍摄页面的PDF快照。谢谢你的帮助

您可以迭代document.styleSheets并在元素的style属性中设置每个CSS规则。CSS伪元素和在HTML元素的HTML样式属性中设置的类当前未在文档中呈现。

查看文档，glamor似乎使用包在页面的DOM中创建样式表。因此，在所有对glamor的调用完成后，遍历文档样式表应该会得到结果。浏览样式表的链接示例并不完全是需要的。下面是一个从旧式代码中修改的示例，该代码将CSS定义作为在浏览器中工作的文本：

function cssStyleRules(sheets) {
    var sheet;
    var list;
    var rule;
    var text="";

    if(sheets) {
        for(var i = 0; sheet = sheets[i++]; ) {
            list = sheet.cssRules;
            for( var j = 0; j < list.length; ++j) {
                rule=list[ j];
                if(rule.type == 1)  { // styleRule
                    text += rule.cssText + '\n';
                }
            }
        }
    }
    return text;
}
var css = cssStyleRules( document.styleSheets);
// write css to a file in a headless browser

显然，代码需要在服务器上的无头浏览器中运行，该浏览器将CSS文本写入文件，然后再由Styleliner处理。 更新：

您已经评论过无法按预期从headless浏览器中获取样式表。这可能是浏览器的错误，但检查Glamer.md的出现

插入样式表 我们在浏览器的样式表上使用自己的抽象将规则插入dom。这个抽象也适用于节点，让我们可以做一些事情，比如SSR，等等。它还根据环境使用不同的插入样式的模式，如

---

。。。但是链接是一个存根。我建议进一步研究实现细节，特别是它们所指的抽象在节点上也起作用。

当此窗口显示CSS和JavaScript处理后呈现的结果时，在开发人员控制台中复制Elements选项卡的内容如何？这将如何获取动态生成的结果styles？@ScottMarcus Iterating document.styleSheets应该获得所有CSS规则，请看，我认为您没有理解我的问题。CSSOM将为您提供已编写的静态规则，但我认为它不会为您提供通过JavaScript设置的样式，特别是当JavaScript设置内联样式时。啊，我明白了，谢谢！我可以通过Chrome Inspector访问CSSOM，但由于某种原因，当我尝试通过编程方式访问它时，我使用的是无头Chrome，document.styleSheets只是返回一个空样式数组…@ScottMarcus问题是如何在HTML中设置CSS内联。如果样式已在HTML中内联设置，则查询部分已解决。将document.styleSheets处的样式（如果有）连接到现有样式属性。