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

個人網頁上有一個連接能夠打印該網頁。 可是，該連接在打印輸出自己中也是可見的。

單擊打印連接時，是否存在會隱藏連接按鈕的JavaScript或HTML代碼？

例：

"Good Evening"
 Print (click Here To Print)

我要在打印文本「 Good Evening」時隱藏該「打印」標籤。 「打印」標籤不該顯示在打印輸出自己上。

---

#1樓

CSS文件

@media print
{
    #pager,
    form,
    .no-print
    {
        display: none !important;
        height: 0;
    }


    .no-print, .no-print *{
        display: none !important;
        height: 0;
    }
}

HTML標題

<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >

元件

<div class="no-print"></div>

---

#2樓

您能夠將連接放置在div中，而後在錨點標記上使用JavaScript來在單擊時隱藏div。 示例（未經測試，可能須要調整，但您明白了）：

<div id="printOption">
    <a href="javascript:void();" 
       onclick="document.getElementById('printOption').style.visibility = 'hidden'; 
       document.print(); 
       return true;">
       Print
    </a>
</div>

缺點是，一旦單擊該按鈕，該按鈕就會消失，而且在頁面上將丟失該選項（儘管始終爲Ctrl + P）。

更好的解決方案是建立一個打印樣式表，並在該樣式表中指定printOption ID（或任何您稱之爲的名稱）的隱藏狀態。 您能夠在HTML的開頭部分執行此操做，並使用media屬性指定第二個樣式表。

---

#3樓

最佳實踐是使用專門用於打印的樣式表 ，並將其media屬性設置爲print 。

在其中，顯示/隱藏要在紙上打印的元素。

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

---

#4樓

在樣式表中添加：

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

而後在您不想顯示在打印版本中的HTML中添加class='no-print' （或將no-print類添加到現有的class語句中），例如按鈕。

---

#5樓

最好的辦法是建立頁面的「僅打印」版本。

哦，等等...這已經不是1999年了。 使用帶有「顯示：無」的打印CSS。