Wie kann ich Elemente wie Druckschaltflächen beim Drucken einer Webseite ausblenden?

Elemente beim Drucken einer Webseite verbergen

Das Drucken einer Webseite ist eine häufige Aufgabe, aber es kann frustrierend sein, wenn unerwünschte Elemente darin angezeigt werden den Ausdruck. Ein Element, das oft ein Ärgernis darstellt, ist der Druckknopf selbst. Wenn Sie die Schaltfläche „Drucken“ von Ihren gedruckten Seiten entfernen möchten, können Sie dies wie folgt erreichen:

CSS-Medienabfragen

Medienabfragen in Cascading Style Sheets ( CSS) ermöglichen es Ihnen, Stile speziell für Ausdrucke zu definieren. Um Elemente beim Drucken auszublenden, können Sie die @media-Druckregel verwenden:

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

Anwenden der Klasse

Sobald Sie die CSS-Regel eingerichtet haben, benötigen Sie um dem Element, das Sie verbergen möchten, eine Klasse hinzuzufügen. Sie können die No-Print-Klasse entweder direkt zuweisen:

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

Oder an eine bestehende Klasse anhängen:

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

Beispiel

Betrachten Sie das folgende Beispiel:

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

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

Wenn die Seite gedruckt wird, wird die Schaltfläche „Drucken“ angezeigt ausgeblendet, sodass nur der Text „Guten Abend“ auf dem Ausdruck verbleibt.

Hinweis:

Die !important-Deklaration stellt sicher, dass der Stil display: none angewendet wird, auch wenn ein anderer angezeigt wird Stile versuchen, es zu überschreiben.

Das obige ist der detaillierte Inhalt vonWie kann ich Elemente wie Druckschaltflächen beim Drucken einer Webseite ausblenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!