印刷時に Web ページの要素を非表示にするにはどうすればよいですか?

Web ページの印刷中に要素を隠す

Web ページを印刷する場合、印刷出力から特定の要素を除外することが望ましいことがよくあります。たとえば、画面に表示されているボタンやリンクが印刷版に表示され、望ましくない乱雑さが生じる場合があります。

解決策: CSS メディア クエリ

CSS メディア クエリこの問題の解決策を提案します。 「印刷」メディアのメディア クエリ内で特定のスタイル ルールを適用すると、印刷出力が進行中かどうかに基づいて要素の表示/非表示を制御できます。

実装:

1. 印刷固有のスタイルシートを作成するルール:

   次のコードをスタイルシートに追加します:

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

   このルールは、ブラウザーが起動しているときに「no-print」クラスを持つ要素が非表示になることを示します。印刷モード。

2. 非印刷モードを適用します。クラス:

   HTML で、印刷中に非表示にする要素に「no-print」クラスを追加します。例:

   <a class="no-print" href="#">Print (click Here To Print)</a>

例:

次の例は、印刷における 'no-print' クラスの効果を示しています。 🎜>

"Good Evening"
<a class="no-print" href="#">Print (click Here To Print)</a>

ユーザーが「印刷」リンクをクリックすると、ブラウザーには次の内容のみが含まれる印刷出力が表示されます。 「こんばんは」というテキスト。 「印刷」リンク自体は非表示になります。

以上が印刷時に Web ページの要素を非表示にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。