html - 打印时隐藏按钮

Question

我有一个页面，底部有 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>

我设法在打印时隐藏了打印按钮，但我不能隐藏其他按钮。

我在互联网上搜索了解决方案，大多数问题都是通过在 css 中添加 display:none; 来回答的，但我最终在屏幕上看到了 3 个隐藏按钮。 我只想在打印时隐藏按钮

答案可能很简单，我在网络开发方面的知识很丰富。

提前谢谢你。

Answer 1

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

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

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

@media print block 中定义的样式仅在打印页面时应用。您可以通过单击代码段中的打印按钮来测试它；你会得到一个空白页。