Rumah > hujung hadapan web > tutorial js > Bagaimanakah Saya Boleh Mencetak Div ​​Tertentu Hanya Menggunakan CSS Tanpa Menjejaskan Halaman Selebihnya?

Bagaimanakah Saya Boleh Mencetak Div ​​Tertentu Hanya Menggunakan CSS Tanpa Menjejaskan Halaman Selebihnya?

Barbara Streisand
Lepaskan: 2024-12-07 20:33:12
asal
980 orang telah melayarinya

How Can I Print Only a Specific Div Using CSS Without Affecting the Rest of the Page?

Mencetak Div ​​Khusus Tanpa Menjejaskan Kandungan Halaman Lain

Tugas mencetak div tertentu tanpa mengganggu kandungan halaman yang lain boleh dicapai menggunakan CSS. Begini cara anda boleh mencapai ini:

Penyelesaian CSS Sahaja:

Laksanakan blok kod CSS berikut:

@media print {
  body {
    visibility: hidden;
  }
  #section-to-print {
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
  }
}
Salin selepas log masuk

Bagaimana ia Berfungsi:

Pertanyaan media CSS ini mengaktifkan gaya tertentu apabila halaman sedang dicetak. Ia menyembunyikan keseluruhan elemen badan, meninggalkan hanya div dengan id "bahagian-untuk-cetak" kelihatan. Selain itu, div itu diletakkan secara mutlak di penjuru kiri sebelah atas halaman, memastikan ia dicetak dengan betul.

Faedah Menggunakan CSS:

  • Mudah dan penyelesaian yang boleh dipercayai yang memerlukan pengekodan minimum.
  • Sifat keterlihatan CSS menyokong kedua-dua warisan dan keturunan, membolehkan anda untuk menyembunyikan atau menunjukkan unsur secara selektif.
  • Kedudukan mutlak menyediakan kawalan ke atas reka letak bercetak, memastikan cetakan div yang diingini dicetak dengan betul.

Nota: Sentiasa uji cetakan anda gaya dalam pratonton cetakan penyemak imbas anda untuk mengesahkan ia berfungsi seperti yang dimaksudkan. Pendekatan alternatif, seperti menggunakan display:none, boleh menjadi lebih kompleks dan mungkin memerlukan perubahan pada struktur halaman anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencetak Div ​​Tertentu Hanya Menggunakan CSS Tanpa Menjejaskan Halaman Selebihnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan