Bagaimanakah Saya Boleh Menyembunyikan Elemen Seperti Butang Cetak Apabila Mencetak Halaman Web?

Menyembunyikan Elemen Semasa Pencetakan Halaman Web

Mencetak halaman web ialah tugas biasa, tetapi ia boleh mengecewakan apabila elemen yang tidak diingini muncul dalam cetakan itu. Satu elemen sedemikian yang sering menimbulkan gangguan ialah butang cetak itu sendiri. Jika anda ingin mengalih keluar butang cetak daripada halaman bercetak anda, berikut ialah cara anda boleh mencapainya:

Pertanyaan Media CSS

Pertanyaan media dalam Helaian Gaya Cascading ( CSS) membolehkan anda menentukan gaya khusus untuk cetakan. Untuk menyembunyikan elemen semasa mencetak, anda boleh menggunakan peraturan cetakan @media:

@media print {
    .no-print, .no-print * {
        display: none !important;
    }
}

Memohon Kelas

Setelah anda mempunyai peraturan CSS, anda perlu untuk menambah kelas pada elemen yang anda ingin sembunyikan. Anda boleh sama ada menetapkan kelas tanpa cetak secara langsung:

<button class="no-print">Print</button>

Atau tambahkannya pada kelas sedia ada:

<button class="btn btn-primary no-print">Print</button>

Contoh

Pertimbangkan contoh berikut:

<p>Good Evening</p>
<button>

@media print {
    #print-button {
        display: none !important;
    }
}

Apabila halaman dicetak, Butang "Cetak" akan disembunyikan, hanya meninggalkan teks "Selamat Petang" pada cetakan.

Nota:

Pengisytiharan !penting memastikan paparan: tiada gaya digunakan walaupun gaya lain cuba mengatasinya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyembunyikan Elemen Seperti Butang Cetak Apabila Mencetak Halaman Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!