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

在網頁列印過程中隱藏元素

列印網頁是一項常見任務，但在網頁中出現不必要的元素可能會令人沮喪列印輸出。經常造成麻煩的一個元素是列印按鈕本身。如果您想從列印頁面中刪除列印按鈕，請按以下方法實現：

CSS 媒體查詢

層疊樣式表中的媒體查詢( CSS）允許您專門為列印輸出定義樣式。要在列印時隱藏元素，您可以使用@media 列印規則：

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

應用類別

一旦設定了CSS 規則，您需要向要隱藏的元素添加一個類別。您可以直接指派無列印類別：

<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」。

注意：

!important 聲明確保顯示：即使其他樣式嘗試覆蓋它，也不會應用任何樣式。

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