16 回答

• 0

  有一个firefox plugin可以保存整个页面的HTML，CSS等 . 但我还没有看到一个部分保存 .

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

  回复于 2024-04-29T07:15:48+08:00
• 11

  SnappySnippet

  我终于找到了一些时间来创建这个工具 . 您可以从Chrome网上应用店安装SnappySnippet . 它允许从指定的（最后检查的）DOM节点轻松提取HTML CSS . 此外，您可以将代码直接发送到CodePen或JSFiddle . 请享用！

  

  其他功能

  • 清理HTML（删除不必要的属性，修复缩进）

  • 优化CSS使其可读

  • 完全可配置（可关闭所有过滤器）

  • 适用于 ::before 和 ::after 伪元素
    由于Bootstrap和Flat-UI项目，

  • 很好的UI

  代码

  SnappySnippet是开源的，你可以找到code on GitHub .

  实施

  因为我在做这个的过程中学到了很多，所以我决定分享一些我经历过的问题和我的解决方案，也许有人会发现它很有趣 .

  第一次尝试 - getMatchedCSSRules（）

  起初我尝试检索原始CSS规则（来自网站上的CSS文件） . 非常令人惊讶的是，由于 window.getMatchedCSSRules() ，这非常简单，但是，它似乎不是一个好主意，我放弃了这一尝试 .

  第二次尝试 - getComputedStyle（）

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

  问题1 - 将CSS与HTML分离

  这里的解决方案不是很漂亮，但很简单 . 我已为所选子树中的所有节点分配了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-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库正是这样做的 . 事实证明，I was right (jquery-clean) . 什么's more, I'已经有额外的不必要的属性删除（ style ， data-ng-repeat 等） .

  问题7 - 过滤破解CSS

  由于在某些情况下，上面提到的过滤器可能会破坏代码段中的CSS，因此我将所有过滤器都设为可选 . 您可以从“设置”菜单中禁用它们 .

  回复于 2024-04-29T07:15:48+08:00
• 43

  我在这里完成了所有提到的工具 . 但是他们给你重复的，脏的HTML CSS以及你正在盯着的美丽面孔 . 他们不给你JS .

  我所做的：

  • 首先，我会过滤页面上不需要的广告

  • 然后，保存完整的网页以及链接资源 .

  • 删除不必要的HTML，CSS和JS

  • 小心地逐一取消资源链接 .

  回复于 2024-04-29T07:15:48+08:00
• 0

  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);
  
  }
  

  这是一个彻头彻尾的黑客，你会有很多“垃圾”css属性需要通过，但至少应该让你开始 .

  回复于 2024-04-29T07:15:48+08:00
• 29

  我最初问这个问题我正在寻找Chrome（或FireFox）解决方案，但我在Internet Explorer开发人员工具中偶然发现了这个功能 . 几乎我在找什么（除了javascript）

  

  结果：

  

  回复于 2024-04-29T07:15:48+08:00
• 2

  多年前我为了同样的目的创建了这个工具：
  http://www.betterprogramming.com/htmlclipper.html

  欢迎您使用和改进它 .

  回复于 2024-04-29T07:15:48+08:00
• 3

  这可以通过名为 scrapbook 的Firebug插件来完成

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

  

  Edit:

  This也可以提供帮助

  Firequark是Firebug的扩展，用于帮助HTML屏幕抓取过程 . Firequark使用Firebug（Firefox的Web开发插件）从网页自动提取单个或多个html节点的css选择器 . 生成的css选择器可以作为Scrapi等html屏幕抓取工具的输入来提取信息 . Firequark旨在释放css选择器的强大功能，以便使用html屏幕抓取功能 .

  回复于 2024-04-29T07:15:48+08:00
• 2

  divclip是Florentin Sardan的更新版htmlclipper

  具有现代增强功能：ES5，HTML5，范围CSS ......

  您可以通过以下方式以编程方式提取风格化的div：

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

  请享用 .

  回复于 2024-04-29T07:15:48+08:00
• 0

  没有插件需要 . 只需单击一下，就可以非常简单地使用Internet Explorer 11本机开发人员工具完成它，非常干净 . 恰好在元素上并检查该元素，右键单击某个块并选择“使用样式复制元素” . 您可以在下图中看到它 .

  它提供的css代码非常干净，就像

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

  回复于 2024-04-29T07:15:48+08:00
• 3

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

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

  回复于 2024-04-29T07:15:48+08:00
• 24

  我没有意识到这个具有单一解决方案的工具，但您可以同时使用Firebug和Web Developer extension .

  使用Firebug复制你需要的html部分（Inspect Element）和Web Developer，看看哪个css与一个元素相关联（Calling Web Developer“View Style Information” - 它就像Firebug的“Inspect Element”一样，但不是显示html标记它显示与该标记相关联的CSS） .

  这不是你想要的（一键点击一切），但它非常接近，至少是直观的 .

  

  回复于 2024-04-29T07:15:48+08:00
• 8

  http://clipboard.com做得很好 . 虽然您对复制版本的期望与原版完全一致，因此您可以使用它进行游戏和学习，但这可能并不现实 .

  回复于 2024-04-29T07:15:48+08:00
• 5

  我在Firebug上也需要这个功能！在此之前，另一种方法是使用this在线服务来删除类并将css转换为内联样式 .

  回复于 2024-04-29T07:15:48+08:00
• 3

  只需从网页上复制您想要的部分，然后将其粘贴到wysiwyg编辑器中即可 . 单击编辑器工具栏上的“源”按钮检查html源代码 .

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

  回复于 2024-04-29T07:15:48+08:00
• 48

  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（）

  回复于 2024-04-29T07:15:48+08:00
• 527

  我已经将top voted answer改编为可拖动的书签 .

  只需访问this page并拖动即可"Run jQuery Code"按钮到您的书签栏 .

  回复于 2024-04-29T07:15:48+08:00