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

在网页打印期间隐藏元素

打印网页时，通常希望从打印输出中排除某些元素。例如，屏幕上可见的按钮或链接可能会出现在打印版本上，从而造成不良混乱。

解决方案：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中文网其他相关文章！