html – 打印时隐藏按钮

发布时间：2020-12-14 23:39:58 所属栏目：资源来源：网络整理

导读：我有一个页面,底部包含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.

我有一个页面,底部包含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打印块中定义的样式仅在打印页面时应用.您可以通过单击代码段中的打印按钮来测试它;你会得到一个空白页面.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!