html – 打印时隐藏按钮

前端之家收集整理的这篇文章主要介绍了html – 打印时隐藏按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个页面,底部包含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>

我设法在打印时隐藏了打印按钮,但我无法与其他人打印.

我在互联网上搜索解决方案,大多数问题都是通过添加display:none;在css中,但我最终在屏幕上有3个隐藏按钮.
我只想在打印时隐藏按钮

答案可能很简单,我在网络开发方面的知识非常有用.

先感谢您.

解决方法

您可以使用CSS @media查询.例如:
@media print {
  #printPageButton {
    display: none;
  }
}
<button id="printPageButton" onClick="window.print();">Print</button>

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

猜你在找的HTML相关文章