Heim > Web-Frontend > CSS-Tutorial > Wie kann ich unerwünschte Webseitenelemente beim Drucken ausblenden?

Wie kann ich unerwünschte Webseitenelemente beim Drucken ausblenden?

Barbara Streisand
Freigeben: 2025-01-03 07:07:39
Original
634 Leute haben es durchsucht

How Can I Hide Unwanted Webpage Elements When Printing?

Elemente beim Drucken von Webseiten ausblenden

Viele Menschen benötigen die Möglichkeit, Webseiten zu drucken, finden es jedoch möglicherweise unpraktisch, wenn Elemente auf der Seite, wie z Schaltflächen, Navigationsleisten oder andere Komponenten werden im Ausdruck angezeigt. Dies kann zu einer Ablenkung führen und das gedruckte Dokument unübersichtlich machen. Um dieses Problem auszuräumen, beschäftigen wir uns mit einer Lösung, die es Ihnen ermöglicht, bestimmte Elemente während des Druckvorgangs auszublenden.

Elemente über CSS ausblenden

Eine effektive Methode zum Ausblenden von Elementen Beim Drucken werden CSS-Regeln (@media print) verwendet. Durch die Einbindung des folgenden Codes in Ihr Stylesheet können Sie diesen Effekt erzielen:

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

Dieser Code erstellt eine CSS-Regel, die für den Medientyp „Drucken“ gilt. Innerhalb dieser Regel werden alle HTML-Elemente mit der Klasse „no-print“ sowie alle darin enthaltenen untergeordneten Elemente beim Drucken ausgeblendet.

Anwenden der Klasse „no-print“

Um ein Element während des Druckens auszublenden, fügen Sie einfach die Klasse „no-print“ zu seinem HTML-Code hinzu. Dies kann inline, innerhalb des öffnenden Tags des Elements oder innerhalb einer vorhandenen Klassenanweisung erfolgen. Wenn Sie beispielsweise eine Schaltfläche mit dem folgenden HTML-Code haben:

<button>Print</button>
Nach dem Login kopieren

Sie können sie während des Druckens ausblenden, indem Sie sie ändern in:

<button>
Nach dem Login kopieren

Beispiel im Kontext

Stellen Sie sich das folgende Szenario vor:

"Good Evening"
Print (click Here To Print)
Nach dem Login kopieren

Um die Beschriftung „Drucken“ beim Drucken des Textes auszublenden „Guten Abend“, fügen Sie die Klasse „no-print“ zum HTML der Schaltfläche hinzu:

"Good Evening"
<button>
Nach dem Login kopieren

Auf diese Weise wird die Beschriftung „Drucken“ während des Druckens ausgeblendet, was zu einem saubereren und fokussierteren Ausdruck führt .

Das obige ist der detaillierte Inhalt vonWie kann ich unerwünschte Webseitenelemente beim Drucken ausblenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage