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

2018-07-01 07:23:43

我在我的网页上有一个链接来打印网页。但是，链接在打印输出中也是可见的。

当我点击打印链接时是否有JavaScript或HTML代码隐藏链接按钮？

例：

 "Good Evening"
 Print (click Here To Print)

我想在打印文本“晚上好”时隐藏此“打印”标签。 “打印”标签不应显示在打印输出本身上。

在你的样式表中添加：

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

然后在您的HTML中添加class='no-print' （或将no-print类添加到现有的类语句中），而您不希望它们出现在打印版本中，例如按钮。我得到这个'noPrint'而不是'noprint'（小写）。

最佳做法是使用专门用于打印的样式表 ，并设置其media属性以进行print 。

其中，显示/隐藏要在纸上打印的元素。

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

Bootstrap 3有它自己的类叫做：

hidden-print

它是这样定义的：

@media print {
  .hidden-print {
    display: none !important;
  }
}

你不必自己定义它。

在Bootstrap 4中，它已更改为：

.d-print-none

链接地址: http://www.djcxy.com/p/87317.html