如何在硬拷贝中删除打印按钮

时间:2014-03-14 02:05:44

标签: javascript

我尝试这样做以隐藏我在硬拷贝上的按钮,但仍然显示在我的硬拷贝

<script type="text/javascript">
var button = document.getElementById('print') button.addEventListener('click',hideshow,false);
function printFrom_hidden()
{

    document.getElementById('print').style.display="block";
    //document.getElementById('').style.display = ;
    this.style="display:none";
}
</script>

<input type="button" value="Print" name="print" id="print" onClick="printFrom();printFrom_hidden();">

3 个答案:

答案 0 :(得分:4)

为此我建议使用CSS样式表的媒体类型吗?见http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/

为打印机编写样式表远远优于破解屏幕样式的更改以使其适合打印机。出于您的目的,它应该像将其添加到样式表

一样简单
@media print {
    input#print { display: none }
}

据我所知,这就是它的意图。遗憾的是,Web开发人员和设计人员都经常忘记并非所有内容都是屏幕!

答案 1 :(得分:1)

您正在调用printForm();首先,然后printFrom_hidden()。因此,打印完成后,您的打印按钮将被隐藏。所以逆转它们。

<input type="button" value="Print" name="print" id="print" onClick="printFrom_hidden();printFrom();">

答案 2 :(得分:0)

yourpage.php或yourpage.html或yourpage.aspx或其他

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <style type='text/css'>
      @import 'common.css'; @import `yourpage.css';
    </style>
  </head>
<body class='njs'>
  <input type='button' value='Print' name='print' id='print' />
  <script type='text/javascript src='common.js'></script>
  <script type='text/javascript src='yourpage.js'></script>
</body>
</html>

common.js

//<![CDATA[
var doc = document, bod = doc.body, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
bod.className = 'js';
function gteIE(version, className){
  if(IE >= version)bod.className = className;
}
function E(e){
  return doc.getElementById(e);
}
//]]>

yourpage.js

//<![CDATA[
E('print').onclick = function(){
  print();
}
//]]>

当然,请使用像Dan Farrell建议的CSS。

yourpage.css

#print{
  /* print button CSS when not in print mode */
}
@media print{
  /* CSS for this page goes in here */
  body{
    /* body CSS here */
  }
  #print{
    /* print button CSS here */
  }
}