Html 打印时隐藏按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31425557/
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
Hide buttons when printing
提问by Adnan D.
I have a page which contains at the bottom 3 buttons with the following coding:
我有一个页面，其中包含底部 3 个按钮，代码如下：
function printpage() {
//Get the print button and put it into a variable
var printButton = document.getElementById("printpagebutton");
//Set the print button visibility to 'hidden'
printButton.style.visibility = 'hidden';
//Print the page content
window.print()
printButton.style.visibility = 'visible';
}#options {
align-content:center;
align-items:center;
text-align: center;
}<div id="options">
<input type="submit" value="post news" >
<input id="printpagebutton" type="button" value="print news" onclick="printpage()"/>
<input type="button" value="re-enter the news">
</div>I managed to hide the print button while printing but i couldn't with the others.
我在打印时设法隐藏了打印按钮，但我不能和其他人一起。
I've searched the internet for the solution, and most questions were answered by adding the display:none;in css, but i end up with 3 hidden buttons on the screen.
I only want the buttons hidden while printing
我在互联网上搜索了解决方案，大多数问题都是通过添加display:none;in css来回答的，但我最终在屏幕上看到了 3 个隐藏按钮。我只想在打印时隐藏按钮
Answer might be simple, my knowledge in web developing is acient.
答案可能很简单，我在网络开发方面的知识是古老的。
Thank you in advance.
先感谢您。
回答by Purag
You can use CSS @mediaqueries. For instance:
您可以使用 CSS@media查询。例如：
@media print {
#printPageButton {
display: none;
}
}<button id="printPageButton" onClick="window.print();">Print</button>The styles defined within the @media printblock will only be applied when printing the page. You can test it by clicking the print button in the snippet; you'll get a blank page.
@media print块中定义的样式只会在打印页面时应用。您可以通过单击代码段中的打印按钮来测试它；你会得到一个空白页。
回答by Guy
You can use a css media query to target print:
您可以使用 css 媒体查询来定位打印：
@media print {
.hide-print {
display: none;
}
}
回答by Chuks
Assign an id to the other 2 buttons. For the POST NEWS button you can set id to postnewsand RE-ENTER THE NEWS to reenterthenews; Then do this
为其他 2 个按钮分配一个 id。对于 POST NEWS 按钮，您可以将 id 设置为postnews并重新输入新闻为reenterthenews；然后做这个
function printpage() {
//Get the print button and put it into a variable
var printButton = document.getElementById("printpagebutton");
var postButton = document.getElementById("postnews");
var reenterButton = document.getElementById("reenterthenews");
//Set the button visibility to 'hidden'
printButton.style.visibility = 'hidden';
postButton.style.visibility = 'hidden';
reenterButton.style.visibility = 'hidden';
//Print the page content
window.print()
//Restore button visibility
printButton.style.visibility = 'visible';
postButton.style.visibility = 'visible';
reenterButton.style.visibility = 'visible';
}
HTML
HTML
<div id="options">
<input type="submit" id="postnews" value="post news" >
<input id="printpagebutton" type="button" value="print news" onclick="printpage()"/>
<input type="button" id="reenterthenews" value="re-enter the news">
</div>
