打印网页时如何隐藏元素？

个人网页上有一个连接能够打印该网页。 可是，该连接在打印输出自己中也是可见的。

单击打印连接时，是否存在会隐藏连接按钮的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。