Question

我有一个带有HTML组件的React网页，其中一些使用CSS设置样式，其他一些使用javascript（Glamor）设置样式。我喜欢的是带有内联CSS的HTML代码，它完全复制了要通过电子邮件发送的页面外观。

我知道我可以使用像Styliner这样的包来内联CSS，但我想知道是否有可能以某种方式将js定义的Glamour样式转换为纯CSS并内联它？

如果不可能，那么我可能会探索不同的路线（拍摄页面的PDF快照）。感谢帮助！

Answer 1

您可以迭代document.styleSheets并将每个CSS规则设置为元素的style属性。 HTML元素的HTML style属性设置的CSS伪元素和类目前不在document内呈现。

Answer 2

查看文档，魅力似乎是使用包在页面的DOM中创建样式表。因此，在完成对魅力的所有调用之后，遍历文档样式表应该会获得结果。查看样式表的链接示例并不完全是需要的。以下是将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

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

<小时/> 更新：

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

插入样式表

我们在浏览器的样式表中使用我们自己的抽象来将规则插入到dom中。这个抽象也适用于节点，让我们做SSR之类的东西。它还使用不同的模式插入基于环境的样式，如detailed here

...但链接是一个存根。我建议进一步研究实现细节，特别是它们的含义＆＃34;这种抽象也适用于节点＆＃34;。

有没有办法将使用Javascript部分样式化的网页转换为纯HTML和CSS？

2 个答案:

插入样式表