如何为一个元素导出所有相关的 HTML/CSS答案

【问题标题】：How to export all relevant HTML/CSS for one element如何为一个元素导出所有相关的 HTML/CSS
【发布时间】：2012-02-08 15:37:57
【问题描述】：

我确定有这个问题，但我找不到：

是否有一种工具可以获取我的 HTML 文档的一个元素并导出那个元素及其所有父级 strong> 及其所有相关的 CSS，但 没有别的？

编辑：

对不起，我不够清楚。我并不是说我想要 Firebug/DevTools，我的意思是一个工具 [可能是某种浏览器内的功能]，它输出所有相关的 HTML/将所选元素的 CSS 放入 自包含 文件/到剪贴板。

EDIT2：

当我说 输出所有相关的 HTML/CSS 时，我的意思是我想要该元素及其所有 css 规则，然后 每个父元素及其 css 规则一直到 . 作为输出，我将获得足够的 HTML/CSS 以作为独立页面打开，并让目标元素呈现并受所有相关 CSS 规则影响。

【问题讨论】：

导出到什么（HTML、文本...）？到哪里（另一个网站，一个文件......）？您在寻找浏览器扩展程序吗？对于 javascript？
JavaScript 可能可以做到这一点，尽管您需要解释您要“导出”到哪里（我也很好奇“为什么？”）。我很感兴趣为什么你想要父母，而不是显然，后代元素。
在谷歌浏览器中，您可以右键单击元素并查看其计算的样式，查看值的来源。这可能有助于您调试？
对不起应该说我目前正在使用 Chrome 开发工具在浏览器中进行调试。我想为 JSfiddle/Pastebin 导出自包含的 HTML/CSS，甚至只是为了简化我的离线调试。
你想导出到剪贴板 = 从 Firebug/devtools '复制'它

标签： html css debugging

【解决方案1】：

是的，有一种工具和方法可以做到这一点。

首先，使用 Chrome 扩展程序，您可以从 Chrome 网上应用店安装SnappySnippet。它允许从指定的（最后检查的）DOM 节点轻松提取 HTML+CSS。此外，您可以将代码直接发送到 CodePen 或 JSFiddle。

其次，CSS Used，其他 Chrome 扩展，用于提取带有子 CSS 的 CSS。

第三，没有扩展，如果你想让 CSS 嵌入 HTML 或以上扩展不适合你，你可以使用任何基于 Webkit 的浏览器（如 Chrome 或 Firefox）在控制台中运行脚本，这会将所有 css 添加到 html元素，您可以轻松地复制 OuterHTML，它可以在任何地方工作。

var el = document.querySelector(“#yourId”); // change yourId to id of your element, or you can write “body” and it will convert all document
var els = el.getElementsByTagName("*");

for(var i = -1, l = els.length; ++i < l;){
    els[i].setAttribute("style", window.getComputedStyle(els[i]).cssText);
}

所以，只需将此代码复制到控制台（右键单击页面->检查->控制台），将 yourid 更改为 yourid 或将其设置为“body”，运行它然后右键单击您的元素并“复制 outerHTML”

【讨论】：

我已经很久没有问这个问题了，我从 SnappySnippet 和触发它的 SO 问题中看到很多其他人都问过这个问题。感谢您的 7 年决议。

【解决方案2】：

你的意思是像 Firebug (Firefox addon) 吗？还是 Chrome 中的调试栏（在浏览器中按 F12）？

在 Chrome 中：

按 F12
点击左下角的循环。
点击元素
现在您可以看到所有样式。
在大窗口中可以看到其他元素，以及下面的元素它。

【讨论】：

我不是指浏览器内的调试器[尽管其中一个可能具有此功能]。我的意思是一些以这种方式选择元素的工具，但是将该元素的所有相关 HTML/CSS 导出到一个独立的文件中[好吧，我可能是指剪贴板，但你知道我的意思]

【解决方案3】：

在chrome中，可以右键页面，然后选择“inspect element”查看页面的html代码（但在浏览器中）。然后，右键单击要导出的元素，然后选择“复制为 html”。将其粘贴到您喜欢的任何编辑器中。希望这会有所帮助。

【讨论】：

【解决方案4】：

按 F12 或右键单击并转到“检查元素”，然后选择元素以获取当前网页的 HTML 代码。一旦此时单击左侧的放大镜并使用它单击页面的元素，这将显示用于该特定元素的代码，之后您可以右键单击并选择“复制 Html”，或者您可以去“编辑为 Html”，然后复制代码。

【讨论】：

【解决方案5】：

您可以尝试为此使用 Site Sucker 之类的工具。我用它来抓取整个网站，但有些设置可能会限制您查找的内容。

【讨论】：

【解决方案6】：

很好的问题 - 今天它对我来说很有趣:-)！

基于已接受的答案（谢谢！）和this answer，我有：

var el = document.querySelector("#question > div.post-layout > div.postcell.post-layout--right > div.s-prose.js-post-body"); // change yourId to id of your element, or you can write “body” and it will convert all document
var els = el.getElementsByTagName("*");

for(var i = -1, l = els.length; ++i < l;){
    el = els[i]
    s = getComputedStyle(el)
    for (let styleKey in el.style) {
        for (let computedStyleKey in s) {
            let computedStyleKeyCamelCase = computedStyleKey.replace(/\-([a-z])/g, v => v[1].toUpperCase());
            if ((typeof el.style[styleKey] != "function") && (styleKey != 'cssText')){
                if(styleKey == computedStyleKeyCamelCase) {
                    el.style[styleKey] = s[computedStyleKey];
                }
            }
        }
    }
}

附：

上面的代码应该在开发者工具 (F12) 控制台中运行（在 Chrome 中尝试过），它会为每个元素添加内联样式

运行后您可以右键单击并执行 Copy / OuterHTML

【讨论】：