打印时隐藏按钮 [英] Hide buttons when printing

问题描述

我有一个页面，该页面的底部3个按钮包含以下代码:

I have a page which contains at the bottom 3 buttons with the following coding:

    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.

我已经在互联网上搜索了解决方案，大多数问题都通过在CSS中添加display:none;来回答，但最终在屏幕上显示了3个隐藏的按钮. 我只希望在打印时隐藏按钮

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

答案可能很简单，我在Web开发方面的知识很深.

Answer might be simple, my knowledge in web developing is acient.

谢谢.

推荐答案

您可以使用CSS @media查询.例如:

You can use CSS @media queries. For instance:

@media print {
  #printPageButton {
    display: none;
  }
}

<button id="printPageButton" onClick="window.print();">Print</button>

@media print块中定义的样式仅在打印页面时适用.您可以通过单击代码段中的打印"按钮进行测试；您会得到一个空白页.

The styles defined within the @media print block 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.

这篇关于打印时隐藏按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！