Question

我希望用户能够打印包含或不包含div中的某些信息的文档。我有两个样式表，其中一个指定打印时要隐藏的div类的样式：。隐藏 {display：none; }

以下是根据传递的参数选择样式表的脚本：

function print(o) {
  var head = document.getElementsByTagName('head')[0].innerHTML;
  if (o == 'withinfo') {
    head += '<link rel="stylesheet" href="printwithinfo.css" media="print" />';
 }
 if (o == 'withoutinfo') {
    head += '<link rel="stylesheet" href="printwithoutinfo.css" media="print" />';
 }
 document.getElementsByTagName('head')[0].innerHTML = head;
 }

然后在我的HTML中，我有以下内容：

   <div class="hide">My Info</div>

我的两个按钮如下：

   <input type="button" value="Print with info" onclick="print('withinfo');">

   <input type="button" value="Print without info" onclick="print('withoutinfo');">

不幸的是，当我点击其中一个按钮时，没有任何反应。能不能让我知道我做错了什么？

Answer 1

首先，我强烈建议您更改您的func名称coz print（）在Javascript中保留。

然后对我来说，你的代码似乎工作正常，试试这个：

<!doctype html>
<html>
<head></head>


<body>
    <script>
        function Myprint(o) {
            var head = document.getElementsByTagName('head')[0].innerHTML;
            if (o == 'withinfo') {
              head += '<link rel="stylesheet" href="b.css" media="print" />';
           }
           if (o == 'withoutinfo') {
              head += '<link rel="stylesheet" href="a.css" media="print" />';
           }
           document.getElementsByTagName('head')[0].innerHTML = head;
           window.print();
}
    </script>
       <div id="hide">My Info</div>  
       Always here
    <input type="button" value="Print with info" onclick="Myprint('withinfo');" />
    <input type="button" value="Print without info" onclick="Myprint('withoutinfo');" />
</body>
</html>

使用a.css：

div{display:none;}

和b.css：

div{display:block;}

Answer 2

似乎工作得很好。

你必须要知道，当你点击任一按钮时，唯一发生的事情是样式表被附加到头部。由于样式表仅适用于media =“print”，因此只有在用户或您激活打印时才会应用它。

如果你想激活它，你可以这样做。

<input type="button" value="Print with info" onclick="print('withinfo');window.print();"></input>
<input type="button" value="Print without info" onclick="print('withoutinfo');window.print();"></input>

如果您只想测试正在应用的样式表，则可以删除链接标记的（media =“print”）部分。这限制了样式表仅在“打印”中应用。

注意：您的打印功能应该更改名称，因为它会覆盖window.print。

更好的选择

只需使用1个样式表“print.css”，它从一开始就加载，永不改变。

然后将print更改为此

function print(o) {
    document.getElementById("body").className = o;
}

并在样式表中包含以下内容

body.withinfo #hide {
    display: block;
}

body.withoutinfo #hide {
    display: none;
}

通过这种方式，您不必取消以前的样式表，并且唯一改变的是body元素上的类。

根据按下的按钮选择不同的样式表

2 个答案: