CSS 打印网页时如何隐藏元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/355313/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I hide an element when printing a web page?
提问by Diodeus - James MacFarlane
I have a link on my webpage to print the webpage. However, the link is also visible in the printout itself.
我的网页上有一个链接可以打印网页。但是，该链接在打印输出本身中也是可见的。
Is there javascript or HTML code which would hide the link button when I click the print link?
当我单击打印链接时，是否有 javascript 或 HTML 代码会隐藏链接按钮？
Example:
例子：
"Good Evening"
Print (click Here To Print)
I want to hide this "Print" label when it prints the text "Good Evening". The "Print" label should not show on the printout itself.
我想在打印文本“晚安”时隐藏这个“打印”标签。“打印”标签不应显示在打印输出本身上。
回答by Diodeus - James MacFarlane
In your stylesheet add:
在您的样式表中添加：
@media print
{
.no-print, .no-print *
{
display: none !important;
}
}
Then add class='no-print'(or add the no-print class to an existing class statement) in your HTML that you don't want to appear in the printed version, such as your button.
然后class='no-print'在 HTML 中添加（或将 no-print 类添加到现有的 class 语句中）您不想出现在打印版本中，例如您的按钮。
回答by Bijan
Bootstrap 3 has its ownclass for thiscalled:
引导3有其自己的这个类叫做：
hidden-print
It is defined like this:
它是这样定义的：
@media print {
.hidden-print {
display: none !important;
}
}
You do not have to define it on your own.
您不必自己定义它。
In Bootstrap 4this has changed to:
在Bootstrap 4 中，这已更改为：
.d-print-none
回答by Andreas Grech
The best practice is to use a style sheet specifically for printing, and and set its mediaattribute to print.
最佳做法是使用专门用于打印的样式表，并将其media属性设置为print.
In it, show/hide the elements that you want to be printed on paper.
在其中，显示/隐藏要打印在纸上的元素。
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
回答by Nesar Nori
Here is a simple solution put this CSS
这是一个简单的解决方案，把这个 CSS
<style>
@media print{
.noprint{
display:none;
}
}
and here is the HTML
这是 HTML
<div class="noprint">
element that need to be hidden when printing
</div>
<div class="noprint">
element that need to be hidden when printing
</div>
回答by user3806549
CSS FILE
CSS文件
@media print
{
#pager,
form,
.no-print
{
display: none !important;
height: 0;
}
.no-print, .no-print *{
display: none !important;
height: 0;
}
}
HTML HEADER
HTML 标题
<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >
ELEMENT
元素
<div class="no-print"></div>
回答by Justin Scott
You could place the link within a div, then use JavaScript on the anchor tag to hide the div when clicked. Example (not tested, may need to be tweaked but you get the idea):
您可以将链接放在 div 中，然后在锚标记上使用 JavaScript 以在单击时隐藏 div。示例（未测试，可能需要调整，但您明白了）：
<div id="printOption">
<a href="javascript:void();"
onclick="document.getElementById('printOption').style.visibility = 'hidden';
document.print();
return true;">
Print
</a>
</div>
The downside is that once clicked, the button disappears and they lose that option on the page (there's always Ctrl+P though).
缺点是一旦点击，按钮就会消失，他们会在页面上失去那个选项（虽然总是有 Ctrl+P）。
The better solution would be to create a print stylesheet and within that stylesheet specify the hidden status of the printOptionID (or whatever you call it). You can do this in the head section of the HTML and specify a second stylesheet with a media attribute.
更好的解决方案是创建一个打印样式表，并在该样式表中指定printOptionID的隐藏状态（或您称之为的任何名称）。您可以在 HTML 的 head 部分执行此操作，并使用 media 属性指定第二个样式表。
回答by Justin Scott
The best thing to do is to create a "print-only" version of the page.
最好的办法是创建页面的“仅打印”版本。
Oh, wait... this isn't 1999 anymore. Use a print CSS with "display: none".
哦，等等……这已经不是 1999 年了。使用带有“display: none”的打印 CSS。
回答by Mike Rapadas
@media print {
.no-print {
visibility: hidden;
}
}<div class="no-print">
Nope
</div>
<div>
Yup
</div>回答by webs
The accepted answer by diodus is not working for some if not all of us. I could not still hide my Print this button from going out on to paper.
diodus 接受的答案对我们所有人都不起作用。我仍然无法隐藏我的 Print this 按钮，以免出现在纸上。
The little adjustment by Clint Pachl of calling css file by adding on
Clint Pachl 通过添加调用 css 文件的小调整
media="screen, print"
and not just
而不仅仅是
media="screen"
is solving this problem. So for clarity and because it is not easy to see Clint Pachl hidden additional help in comments. The user should include the ",print" in css file with the desired formating.
正在解决这个问题。所以为了清楚起见，因为在评论中看到 Clint Pachl 隐藏了额外的帮助并不容易。用户应在具有所需格式的 css 文件中包含“,print”。
<link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">
and not the default media = "screen" only.
而不是默认的 media = "screen" 而已。
<link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">
That i think solves this problem for everyone.
我认为这可以为每个人解决这个问题。
回答by Elias Hasle
If you have Javascript that interferes with the style property of individual elements, thus overriding !important, I suggest handling the events onbeforeprintand onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint
如果您的 Javascript 干扰了单个元素的样式属性，从而覆盖了!important，我建议处理事件onbeforeprint和onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint
