列印時如何隱藏網頁元素？

在網頁列印期間隱藏元素

列印網頁時，通常希望從列印輸出中排除某些元素。例如，螢幕上可見的按鈕或連結可能會出現在列印版本上，造成不良混亂。

解決方案：CSS 媒體查詢

CSS 媒體查詢提供這個問題的解決方案。透過在「列印」媒體的媒體查詢中套用特定的樣式規則，您可以根據列印輸出是否正在進行來控制元素的可見性。

實作：

1. 建立特定於列印的樣式表規則：

   將以下程式碼加入樣式表：

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

   此規則規定，當瀏覽器處於列印模式。

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>

當使用者點擊「列印」連結時，瀏覽器將顯示僅列印的內容包括文字「晚上好」。 「列印」連結本身將被隱藏。

以上是列印時如何隱藏網頁元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！