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
917 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!

sumber:php.cn
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