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

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

这将是伟大的，如果我可以在Firebug中右键单击一个元素，并有一个“保存HTML+CSS+JS为这个元素”选项。这样的工具存在吗?是否有可能扩展Firebug或Chrome开发工具来添加此功能?

当前回答

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

2012-07-17 08:07:37

其他回答

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 ()

2013-10-02 06:16:47

几年前，我出于同样的目的创建了这个工具: http://www.betterprogramming.com/htmlclipper.html

欢迎您使用并改进它。

2013-03-12 15:16:49

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

工作内容:

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

2013-10-11 02:53:50

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

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

2015-09-09 16:11:19