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

Question

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

有没有一个工具可以获取我的HTML文档的一个元素并导出该元素,其所有父项及其所有相关的CSS,但没有别的？

编辑:

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

EDIT2:

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

Answer 1

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

\n\n

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

\n\n

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

\n\n

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

\n\n

var el = document.querySelector(\xe2\x80\x9c#yourId\xe2\x80\x9d); // change yourId to id of your element, or you can write \xe2\x80\x9cbody\xe2\x80\x9d and it will convert all document\nvar els = el.getElementsByTagName("*");\n\nfor(var i = -1, l = els.length; ++i < l;){\n    els[i].setAttribute("style", window.getComputedStyle(els[i]).cssText);\n}\n

\n\n

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

\n