Web ページを印刷するときに印刷ボタンなどの要素を非表示にするにはどうすればよいですか?

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

Web ページの印刷は一般的な作業ですが、不要な要素が表示されるとイライラすることがあります。プリントアウト。しばしば迷惑となる要素の 1 つは、印刷ボタン自体です。印刷ページから印刷ボタンを削除したい場合は、次の方法でこれを実現できます:

CSS メディア クエリ

カスケード スタイル シートのメディア クエリ ( CSS) を使用すると、印刷出力専用のスタイルを定義できます。印刷時に要素を非表示にするには、@media 印刷ルールを使用できます。

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

クラスの適用

CSS ルールを設定したら、次のことが必要です。非表示にする要素にクラスを追加します。 no-print クラスを直接割り当てることもできます:

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

、または既存のクラスに追加することもできます:

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

例

次の例を考えてみましょう。

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

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

ページが印刷すると、[印刷] ボタンが非表示になり、印刷結果には「Good Evening」というテキストだけが残ります。

注:

!重要な宣言により、表示: 他のスタイルがオーバーライドしようとしても、スタイルは適用されません。

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