如何有选择地从特定 DOM 元素复制 HTML、CSS 和 JS？

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

检查网页源是 Web 开发人员的常见做法，但是复制特定部分进行本地修补可能会很麻烦。本文探讨了从 DOM 中所需元素选择性复制 HTML CSS JS 的工具和技术。

SnappySnippet：自定义解决方案

本文作者创建了 SnappySnippet ，一个 Chrome 扩展，提供从最后检查的 DOM 节点中提取 HTML CSS JS 的功能。该工具提供了额外的功能，例如 CSS 优化、代码清理以及直接代码共享到 CodePen 和 JSFiddle。

其他功能

SnappySnippet 包括以下功能：

• HTML 清理和缩进
• CSS 可读性优化
• 自定义和过滤选项
• 伪元素的处理（::before、::after )
• 直观的用户界面

实现细节

SnappySnippet 的实现涉及到几个挑战和解决方案：

问题 1：将 CSS 与 HTML 分离

为了隔离 CSS，作者为所选子树中的节点分配了 ID，并使用这些 ID 创建相应的 CSS 规则。

问题 2：删除默认值

使用 getCompulatedStyle() 导致大量空或默认值的 CSS 属性。为了解决这个问题，作者将网站上下文中的元素样式与应用默认浏览器样式的空 iframe 中的元素样式进行了比较。

问题 3：仅保留速记属性

简写属性（例如边框颜色）在输出中重复。作者使用具有简写等效项的属性列表过滤掉了这些属性。

问题 4：删除前缀属性

前缀属性（例如 -webkit-transform-origin）被认为对于一般用途是不必要的。为了简单起见，作者将它们全部删除了。

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

输出中存在多个具有相同属性和值的 CSS 规则。结合这些规则显着减少了它们的数量。

问题 6：清理 HTML

outerHTML 属性返回未格式化的 HTML 内容。作者合并了一个 JavaScript 库 (jquery-clean)，用于代码重新格式化和删除不必要的属性。

问题 7：过滤器破坏 CSS

在 SnappySnippet 中添加了可选过滤器防止 CSS 损坏。用户可以在“设置”菜单中禁用这些过滤器。

SnappySnippet 的代码已在 GitHub 上公开提供，以便进一步探索和自定义。

以上是如何有选择地从特定 DOM 元素复制 HTML、CSS 和 JS？的详细内容。更多信息请关注PHP中文网其他相关文章！