从DOM的特定元素中选择性地复制HTML+CSS+JS的工具

像大多数web开发人员一样，我偶尔喜欢查看网站的源代码，看看它们的标记是如何构建的。像Firebug和Chrome开发者工具这样的工具可以很容易地检查代码，但是如果我想复制一个特定的部分并在本地使用它，复制所有单独的元素和它们相关的CSS将是一件痛苦的事情。保存整个源代码并删除不相关的代码可能需要做同样多的工作。

如果我可以在Firebug中右键单击一个元素，然后有一个“Save HTML+CSS+JS for this Element"选择。这样的工具存在吗?是否有可能扩展Firebug或Chrome开发工具来添加此功能?

253934 次浏览
小开

有一个火狐浏览器插件保存整个页面的HTML, CSS等。但我还没见过能部分保存的。

我记得IE 5.5有你想要的东西;)

小开

Webkit浏览器(FireBug不确定)允许您轻松地复制元素的HTML，因此这是过程的一部分。

在复制一个元素的HTML之前运行这个命令(在javascript控制台中)会将给定父元素的所有计算样式以及所有子元素移动到内联样式属性中，然后该属性将作为HTML的一部分可用。

var el = document.querySelector("#someid");
var els = el.getElementsByTagName("*");


for(var i = -1, l = els.length; ++i < l;){


els[i].setAttribute("style", window.getComputedStyle(els[i]).cssText);


}

这是一个完全的hack，你会有很多“垃圾”css属性，但至少应该让你开始。

小开

这可以通过名为剪贴簿的Firebug插件来完成

您可以在设置中检查Javascript选项

enter image description here

编辑:

这也有帮助

fireark是Firebug的扩展 以帮助HTML屏幕的过程 刮。Firequark自动 提取单个或的CSS选择器 一个网页中的多个HTML节点 使用Firebug(一个web开发 Firefox插件)。css选择器 生成的可以作为输入给 html屏幕抓取像Scrapi to 提取信息。Firequark是 为释放CSS的力量而构建 选择器使用HTML屏幕 刮。< / p >
小开

我不知道这个工具有一个单独的解决方案，但你可以同时使用Firebug和Web开发扩展。

使用Firebug复制你需要的html部分(Inspect Element)和Web Developer查看哪个css与某个元素相关联(调用Web Developer“查看样式信息”-它的工作方式类似于Firebug的“Inspect Element”，但它显示的不是html标记而是与该标记相关联的css)。

它不是你想要的完全(点击一切)，但它非常接近，至少是直观的。

'查看样式信息'结果从Web开发扩展“></p></div> </div> </div> </div> </div> <div class=

小开

我也需要Firebug上的这个功能!在此之前，另一种方法是使用这 online service删除类并将css转换为内联样式。

小开

我已经改编了得票最多的答案作为一个可拖动的书签。

只需访问这个页面并拖动“运行jQuery代码”按钮到书签栏。

小开

http://clipboardjs.com做得很好。尽管你期望复制的版本和原版完全一样，这样你就可以用它来玩和学习，但这可能不现实。

小开

我最初问这个问题是为了寻找Chrome(或FireFox)的解决方案，但我无意中在ie开发工具中发现了这个功能。几乎就是我要找的(除了javascript)

Element Source with Style

结果:

Element Source with Style result

小开
我在几年前创建了这个工具，目的相同:
http://www.betterprogramming.com/htmlclipper.html < / p >

欢迎您使用并改进它。

小开

只需从网页复制你想要的部分，并将其粘贴在所见即所得编辑器中。点击编辑器工具栏上的“source”按钮，检查html源代码。

当我在Drupal网站上工作时，我发现了这个最简单的方法。我使用wysiwyg CKeditor。

小开
最佳答案

SnappySnippet

我终于找到时间来创建这个工具。你可以从Github安装SnappySnippet。它允许从指定的(最后检查的)DOM节点轻松提取HTML+CSS。此外，您可以将代码直接发送到CodePen或JSFiddle。享受吧!

SnappySnippet Chrome extension

其他功能

  • 清理HTML(删除不必要的属性，修复缩进)
  • 优化CSS使其可读
  • 完全可配置(所有过滤器都可以关闭)
  • 使用::before和::after伪元素
  • 多亏了引导 &Flat-UI项目

代码

SnappySnippet是开源的，你可以找到GitHub上的代码. exe文件。

实现

因为我在做这个的时候学到了很多东西，所以我决定分享一些我经历过的问题和我的解决方法，也许有人会觉得很有趣。

第一次尝试- getMatchedCSSRules()

首先，我尝试检索原始的CSS规则(来自网站上的CSS文件)。令人惊讶的是，多亏了window.getMatchedCSSRules()，这非常简单，然而，它并没有很好地工作。问题在于，我们只选取了在整个文档上下文中匹配的HTML和CSS选择器的一部分，而在HTML片段上下文中不再匹配。由于解析和修改选择器似乎不是一个好主意，我放弃了这个尝试。

第二次尝试- getComputedStyle()

然后，我从@CollectiveCognition建议的东西开始- getComputedStyle()。然而，我真的想把CSS和HTML分开，而不是内联所有的样式。

问题1 -从HTML中分离CSS

这里的解决方案不是很漂亮，但很直接。我已经为所选子树中的所有节点分配了ID，并使用该ID创建适当的CSS规则。

问题2 -删除具有默认值的属性

为节点分配id工作得很好，但是我发现我的每个CSS规则都有~300个属性，使整个CSS不可读 getComputedStyle()返回为给定元素计算的所有可能的CSS属性和值。有些是空的，有些是浏览器默认值。要删除默认值，我必须首先从浏览器中获取它们(并且每个标记都有不同的默认值)。解决方案是比较来自网站的元素与插入空<iframe>的相同元素的样式。这里的逻辑是，在空的<iframe>中没有样式表，所以我在那里追加的每个元素只有默认的浏览器样式。这样我就可以去掉大部分不重要的属性

问题3 -只保留简写属性

我发现的下一件事是具有速记等效的属性被不必要地打印出来(例如，有border: solid black 1px，然后是border-color: black;， border-width: 1px itd.) 为了解决这个问题，我简单地创建了一个具有简写等价物的属性列表，并从结果中过滤掉它们

问题4 -删除前缀属性

在前面的操作之后，每个规则中的属性数量显著降低，但我发现我仍然有许多我从未听说过的-webkit-前缀属性(-webkit-app-region?-webkit-text-emphasis-position ?)。
我想知道我是否应该保留这些属性，因为其中一些属性似乎很有用(-webkit-transform-origin， -webkit-perspective-origin等)。不过，我还没有弄清楚如何验证这一点，因为我知道大多数时候这些属性只是垃圾，所以我决定将它们全部删除

问题5 -组合相同的CSS规则

我发现的下一个问题是相同的CSS规则被反复重复(例如，对于每个具有完全相同样式的<li>，在创建的CSS输出中都有相同的规则) 这只是相互比较规则，并将具有完全相同属性和值的规则组合在一起的问题。结果，我得到的不是#LI_1{...}, #LI_2{...}，而是#LI_1, #LI_2 {...}.

问题6 -清理和修复HTML的缩进

因为我对结果很满意，我移动到HTML。它看起来很混乱，主要是因为outerHTML属性使它的格式与从服务器返回的完全相同 从outerHTML中提取的HTML代码唯一需要的是一个简单的代码重新格式化。由于它在每个IDE中都可用，所以我确信有一个JavaScript库可以做到这一点。结果是我是对的(jquery-clean)。更重要的是，我有多余的属性删除(style， data-ng-repeat等)

问题7 -过滤器破坏CSS

因为在某些情况下，上面提到的过滤器可能会破坏代码片段中的CSS，所以我将它们都设置为可选的。你可以从设置菜单中禁用它们。

小开 
jQuery.fn.extend({
getStyles: function() {
var rulesUsed = [];
var sheets = document.styleSheets;
for (var c = 0; c < sheets.length; c++) {
var rules = sheets[c].rules || sheets[c].cssRules;
for (var r = 0; r < rules.length; r++) {
var selectorText = rules[r].selectorText.toLowerCase().replace(":hover","");
if (this.is(selectorText) || this.find(selectorText).length > 0) {
rulesUsed.push(rules[r]);
}
}
}
var style = rulesUsed.map(function(cssRule) {
return cssRule.selectorText.toLowerCase() + ' { ' + cssRule.style.cssText.toLowerCase() + ' }';
}).join("\n");
return style;
}
});

用法:$("#login_wrapper").getStyles()

小开

我已经用过了所有的工具。但是，它们提供了重复的、肮脏的HTML CSS，而你正盯着它看呢。他们不会给你JS。

工作内容:

  1. 首先，我过滤页面上不需要的广告
  2. 然后，保存完整的网页连同链接资源。
  3. 删除不必要的HTML, CSS和JS
  4. 小心地逐个解除资源链接。
小开

< >强divclip < / >强已更新 Florentin Sardan的版本 htmlclipper < / p >

与现代增强:ES5, HTML5，范围CSS…

你可以用下面的方法提取一个程式化的div:

var html = require("divclip").bySel(".article-body");
console.log(html);

享受。

小开

不需要插件。这可以用ie 11本地开发工具非常简单地完成，只需点击一下，非常干净。选中一个元素，检查该元素，右键单击某个块，选择“Copy element with styles”。你可以在下面的图片中看到它。

它提供了非常干净的css代码，比如

.menu {
margin: 0;
}
.menu li {
list-style: none;
}
小开

最近，我创建了一个chrome扩展“eXtract Snippet”用于复制检查的元素，html和相关的css和媒体查询从一个页面。注意，这将为您提供实际的相关CSS

https://chrome.google.com/webstore/detail/extract-snippet/bfcjfegkgdoomgmofhcidoiampnpbdao?hl=en


提交答案