Bagaimana Anda Menyalin HTML, CSS dan JS secara Selektif daripada Elemen DOM Tertentu?

Alat untuk Menyalin HTML CSS JS secara Selektif daripada Elemen Khusus DOM

Memeriksa sumber halaman web adalah amalan biasa untuk pembangun web, tetapi menyalin bahagian tertentu untuk mengutak-atik tempatan boleh menjadi menyusahkan. Artikel ini meneroka alatan dan teknik untuk menyalin HTML CSS JS secara terpilih daripada elemen yang dikehendaki dalam DOM.

SnappySnippet: Penyelesaian Tersuai

Pengarang artikel ini mencipta SnappySnippet , sambungan Chrome yang menyediakan kefungsian untuk mengekstrak HTML CSS JS daripada nod DOM yang terakhir diperiksa. Alat ini menawarkan ciri tambahan seperti pengoptimuman CSS, pembersihan kod dan perkongsian kod terus ke CodePen dan JSFiddle.

Ciri Lain

SnappySnippet termasuk keupayaan berikut:

• Pembersihan dan lekukan HTML
• Pengoptimuman CSS untuk kebolehbacaan
• Pilihan penyesuaian dan penapisan
• Pengendalian elemen pseudo (::sebelum, ::selepas )
• Antara muka pengguna yang intuitif

Butiran Pelaksanaan

Pelaksanaan SnappySnippet melibatkan beberapa cabaran dan penyelesaian:

Masalah 1: Mengasingkan CSS daripada HTML

Untuk mengasingkan CSS, pengarang memberikan ID kepada nod dalam subpokok yang dipilih dan menggunakan ID tersebut untuk mencipta peraturan CSS yang sepadan.

Masalah 2: Mengalih keluar Nilai Lalai

Penggunaan getComputedStyle() menghasilkan sejumlah besar sifat CSS kosong atau nilai lalai. Untuk menangani perkara ini, pengarang membandingkan gaya elemen dalam konteks tapak web dengan gaya dalam iframe kosong, di mana gaya penyemak imbas lalai digunakan.

Masalah 3: Hanya Menyimpan Sifat Shorthand

Sifat ringkas (cth., warna sempadan) telah diduplikasi dalam output. Pengarang menapis ini menggunakan senarai sifat dengan persamaan trengkas.

Masalah 4: Mengalih keluar Sifat Awalan

Sifat awalan (mis., -webkit-transform-origin) dianggap tidak perlu untuk kegunaan umum. Pengarang mengalih keluar kesemuanya untuk kesederhanaan.

Masalah 5: Menggabungkan Peraturan CSS Yang Sama

Berbilang peraturan CSS dengan sifat dan nilai yang sama terdapat dalam output. Menggabungkan peraturan ini dengan ketara mengurangkan bilangannya.

Masalah 6: Membersihkan HTML

Sifat outerHTML mengembalikan kandungan HTML yang tidak diformat. Pengarang menggabungkan perpustakaan JavaScript (jquery-clean) untuk pemformatan semula kod dan penyingkiran atribut yang tidak perlu.

Masalah 7: Penapis Memecah CSS

Penapis pilihan telah ditambahkan pada SnappySnippet ke mengelakkan kerosakan CSS. Pengguna boleh melumpuhkan penapis ini dalam menu Tetapan.

Kod untuk SnappySnippet tersedia secara terbuka di GitHub untuk penerokaan dan penyesuaian selanjutnya.

Atas ialah kandungan terperinci Bagaimana Anda Menyalin HTML, CSS dan JS secara Selektif daripada Elemen DOM Tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!