如何選擇性地從特定 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中文網其他相關文章！