javascript 仅在打印时显示 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30973912/
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
show div only when printing
提问by user1765862
Let's say that I have
假设我有
<div id="printOnly">
<b>Title</b>
<p>
Printing content
</p>
</div>
Is it possible to hide this div when page rendering and to show only when printing this div?
是否可以在页面渲染时隐藏此 div 并仅在打印此 div 时显示？
回答by Nikhil Aggarwal
You need some css for that
你需要一些css
#printOnly {
display : none;
}
@media print {
#printOnly {
display : block;
}
}
回答by Kiran Dash
@media screen
{
#printOnly{display:none;}
}
@media print
{
#printOnly{}
}
回答by alberto-bottarini
You should use media query.
您应该使用媒体查询。
In your case:
在你的情况下：
#printOnly {
display: none;
}
@media print {
#printOnly {
display: block;
}
}
PS take a look here http://www.joshuawinn.com/css-print-media-query/for browser support
回答by Shrinivas Pai
I think the best solution would be to create a wrapper around the non-printable stuff:
我认为最好的解决方案是围绕不可打印的东西创建一个包装器：
<head>
<style type="text/css">
#printable { display: none; }
@media print
{
#non-printable { display: none; }
#printable { display: block; }
}
</style>
</head>
<body>
<div id="non-printable">
Your normal page contents
</div>
<div id="printable">
Printer version
</div>
</body>
回答by GabrieleU
/*for printer*/
@media print {
#printOnly { }
/* write your css rules*/
}
/*for desktop*/
@media screen {
#printOnly { display: none;}
/*for all display view*/
}
回答by Abdullah Al Shakib
@media screen { #printOnly:{display:none;} }
@media print{ #printOnly:{display:block;} }
回答by hsz
You can attach external css stylesheet with media="print"attribute:
您可以使用media="print"属性附加外部 css 样式表：
<link rel="stylesheet" type="text/css" media="print" href="print.css">
回答by sach
You need media query for switching between print and screen option
您需要媒体查询以在打印和屏幕选项之间切换
@media screen { /* for screen option*/
p {
font-family: verdana, sans-serif;
font-size: 17px;
}
}
@media print { /* for print option*/
@media print { /* 用于打印选项*/
p {
font-family: georgia, serif;
font-size: 14px;
color: blue;
}
}
