打印时隐藏按钮答案

【问题标题】：Hide buttons when printing打印时隐藏按钮
【发布时间】：2015-07-15 08:43:59
【问题描述】：

我的页面底部有 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 个隐藏按钮。我只想在打印时隐藏按钮

答案可能很简单，我的网络开发知识很渊博。

提前谢谢你。

【问题讨论】：

为什么不使用媒体打印 css 文件？
看看@打印样式表：smashingmagazine.com/2011/11/24/…

标签： html css

【解决方案1】：

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

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

&lt;button id="printPageButton" onClick="window.print();"&gt;Print&lt;/button&gt;

@media print 块中定义的样式仅在打印页面时应用。你可以通过点击sn -p中的打印按钮来测试它；你会得到一个空白页。

【讨论】：

【解决方案2】：

为其他 2 个按钮分配一个 id。对于 POST NEWS 按钮，您可以将 id 设置为 postnews 并将 RE-ENTER THE NEWS 设置为 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

<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>

【讨论】：

【解决方案3】：

您可以使用 css 媒体查询来定位打印：

@media print {
  .hide-print {
    display: none;
  }
}

【讨论】：

最好尽可能尝试使用现有标识符，以避免不必要的膨胀。在这种情况下#printPageButton.
Id 是唯一的并且具有高度的特异性，因此建议使用类进行样式设置。