如何使“打印”按钮消失

时间:2010-07-11 21:52:56

标签: javascript html css

我举了一个例子:

我有一个打印图像按钮。单击时,该按钮打开打印对话框,然后我想隐藏图像按钮。

但是,最初我无法看到打印按钮点击它。

<link href="style-print.css" rel="stylesheet" media="print"  type="text/css">
#print {
display: none; 
}

<div style="float: right;" id="print">
<input id="print-bnt" type="button" onclick="callprint()"/> </div>

我希望在显示页面之前,按钮会隐藏。 (???)

我想在点击后隐藏“打印按钮”。

我需要在这里更改什么?

2 个答案:

答案 0 :(得分:1)

以#print开头的链接下面的代码首先隐藏了按钮。只需将整个块移动到style-print.css。

#print {
    display: none;
}

在页面中包含该代码使得无论媒体如何,始终隐藏具有id =“print”的div。将它放在打印样式表中将使得当有人打印时,它激活的样式表,它会看到隐藏任何id =“print”的内容,并且您的按钮将在打印预览和打印页面中消失。 / p>

答案 1 :(得分:0)

        <link href="style-print.css" rel="stylesheet" media="print"  type="text/css">

        .disnone{
           display: none; 
        }
        .fr{
           float: right;
        }

        <div class="fr" id="print">
            <input id="print-bnt" type="button" onclick="callprint()"/> 
        </div>


    <script>
    function callprint(){

      // js 
      addClass(document.getElementById("print"), "disnone");

      // jquery 
      $("#print").addClass("disnone");

      // print process js code .... 

    }

    function viewprint(){

      // js 
      removeClass(document.getElementById("print"), "disnone")


      // jquery 
      $("#print").removeClass("disnone");



    }
    </script>

// javasciprt 

function addClass(ele,cls) {
    if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}

function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
        var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
        ele.className=ele.className.replace(reg,' ');
    }
}

function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}