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

Question

我确定这个问题在那里，但我找不到它:

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

编辑:

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

编辑2:

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

Answer 1

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

首先，使用 Chrome 扩展程序，您可以安装 SnappySnippet来自 Chrome 网上应用店。它允许从指定的(最后检查的)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”