如何导出一个元素的所有相关 HTML/CSS [英] How to export all relevant HTML/CSS for one element

问题描述

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

I'm sure this question is out there but I cannot find it:

是否有一种工具可以获取我的 HTML 文档的一个元素并导出该元素及其所有父元素strong> 及其所有关联的 CSS，但没有其他内容?

Is there a tool that can get one element of my HTML document and export that element, all its parents and all its associated CSS but nothing else?

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

Sorry I was not clear enough. I don't mean that I want Firebug/DevTools, I mean a tool [that maybe a feature of some kind of in-browser] that outputs all the relevant HTML/CSS for the selected element into a self contained file / to the clipboard.

编辑 2:

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

When I say outputs all relevent HTML/CSS I mean that I want that element and all it's css rules, and then each parent element with their css rules all the way up to . What I would get as an output would be enough HTML/CSS to open as a standalone page and have the target element rendered and effected by all relevant CSS rules.

推荐答案

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

Yes, there is a tool/s and ways to do that.

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

First, with Chrome extension, you can install SnappySnippet from Chrome Web Store. It allows easy HTML+CSS extraction from the specified (last inspected) DOM node. Additionally, you can send your code straight to CodePen or JSFiddle.

第二，CSS 使用，其他 Chrome 扩展，用于提取 CSS儿童 CSS.

Second, CSS Used, other Chrome extension, for extracting CSS with children CSSs.

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

And third, without extension, if you want CSS embedded in HTML or above extensions is not working for you, you can use any Webkit based browser (like Chrome or Firefox) to run script in console which will add all css to html element and you can easily just copy OuterHTML and it will work anywhere.

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"

So, just copy this code to Console (Right click on page->Inspect->Console), change yourid to yourid or set it to "body", run it and then right click on your element and "copy outerHTML"

这篇关于如何导出一个元素的所有相关 HTML/CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！