特定の DOM 要素から HTML、CSS、および JS を選択的にコピーするにはどうすればよいですか?

DOM の特定の要素から HTML CSS JS を選択的にコピーするツール

Web ページのソースを検査することは Web 開発者にとって一般的な方法ですが、ローカルでいじるために特定のセクションをコピーするのは面倒な場合があります。この記事では、DOM 内の目的の要素から HTML CSS JS を選択的にコピーするためのツールとテクニックについて説明します。

SnappySnippet: カスタム ソリューション

この記事の作成者は SnappySnippet を作成しました、最後に検査された DOM ノードから HTML CSS JS を抽出する機能を提供する Chrome 拡張機能。このツールは、CSS の最適化、コードのクリーンアップ、CodePen や JSFiddle への直接コード共有などの追加機能を提供します。

その他の機能

SnappySnippet には次の機能が含まれています。

• HTML クリーンアップとインデント
• 読みやすさのための CSS の最適化
• カスタマイズとフィルタリングのオプション
• 擬似要素の処理 (::before、::after)
• 直感的なユーザー インターフェイス

実装詳細

SnappySnippet の実装には、いくつかの課題と解決策が含まれていました。

問題 1: CSS を HTML から分離する

CSS を分離するには、作成者は選択したサブツリー内のノードに ID を割り当て、それらの ID を使用して対応する CSS を作成しましたrules.

問題 2: デフォルト値の削除

getComputedStyle() を使用すると、多数の空またはデフォルト値の CSS プロパティが発生しました。これに対処するために、作成者は、Web サイトのコンテキスト内の要素スタイルと、デフォルトのブラウザ スタイルが適用される空の iframe 内の要素スタイルを比較しました。

問題 3: 短縮プロパティのみを保持する

短縮プロパティ (border-color など) が出力で重複していました。作成者は、同等の短縮表現を含むプロパティのリストを使用してこれらを除外しました。

問題 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 中国語 Web サイトの他の関連記事を参照してください。