從DOM 的特定元素選擇性複製HTML CSS JS 的工具
檢查網頁來源是Web 開發人員的常見做法，但是複製特定部分進行本地修補可能會很麻煩。本文探討了從 DOM 所需元素選擇性複製 HTML CSS JS 的工具和技術。
SnappySnippet：自訂解決方案
本文作者創建了 SnappySnippet ，一個 Chrome 擴展，提供從最後檢查的 DOM 節點中提取 HTML CSS JS 的功能。該工具提供了額外的功能，例如 CSS 優化、程式碼清理以及直接程式碼共享到 CodePen 和 JSFiddle。
其他功能
SnappySnippet 包含以下功能：
實作詳情
實作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中文網其他相關文章！
