javascript - 有没有办法用 JavaScript 在 HTML 中强制硬编码样式？

Question

我知道这听起来与我们在响应式 Web 方面试图实现的目标完全相反，但是，我有一个 python 脚本弹出一个 github 风格的 HTML 表，我想导出文章标签以及它所有呈现的样式，所以我可以将它像基于 HTML 的屏幕截图一样发布在另一个页面上(我的计算机科学类讨论论坛用于此示例)。

现在我正在通过 chrome 的开发人员工具手动转换样式，但我想要一种自动化的方式来应用所有样式来对元素进行硬编码，这样我的样式就不会泄露到网页的其余部分，而且我能够呈现像图像一样显示自身的可靠 HTML 片段。

我试图制作一个嵌套的 for 循环，将所有已应用的样式应用到元素，但由于标签类型不同，该实现中存在很多错误。

如果有一种简单的方法可以做到这一点，我很想知道。即使它是一个网络服务，我也必须将我的 html 粘贴到其中才能获得硬编码结果。

我喜欢能够准备我的回复，我喜欢 GitHub flavoring 的样式类型。我真的很想将它保存在 HTML 中，而不是到处张贴屏幕截图。

最后一点，没有 iframe 或只是链接到另一个页面以查看内容。

Answer 1

尝试使用 Blob，URL.createObjectURL 来保存，“导出”html 片段

var elem = $("article");

var styles = elem.css(["width", "height" /* , additional style properties */ ]);

elem.attr("style", function(i, style) {
  return $.map(styles, function(val, key) {
    return return key + ":" + val + ";"
  }).join();
});

var blob = new Blob([elem[0].outerHTML], {"type":"text/html"});

var objUrl = window.URL.createObjectURL(blob);

// do stuff with `objUrl`
// window.open(objUrl);