1

aa div に情報が含まれているかどうかに関係なく、ユーザーがドキュメントを印刷できるようにしたいと考えています。2 つのスタイルシートがあり、そのうちの 1 つは、印刷時に非表示にする div のクラスのスタイルを指定します。}

以下は、渡されたパラメーターに応じてスタイルシートを選択するスクリプトです。

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>

そして、私の2つのボタンは次のとおりです。

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

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

残念ながら、どちらのボタンをクリックしても何も起こりません。私が間違っていることを教えてください。

4

2 に答える 2

2

まず第一に、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;}
于 2013-04-17T10:29:45.457 に答える
1

それはうまくいくようです。

いずれかのボタンをクリックしたときに起こることは、スタイルシートがヘッドに追加されることだけです。スタイルシートは 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を上書きするため、印刷関数の名前を変更する必要があります。

より良いオプション

最初からロードされ、変更されないスタイルシート「print.css」を 1 つ使用するだけです。

次に、印刷をこれに変更します

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

スタイルシートには次のものがあります

body.withinfo #hide {
    display: block;
}

body.withoutinfo #hide {
    display: none;
}

この方法では、以前のスタイルシートをアンロードする必要はなく、変更されるのは body 要素のクラスだけです。

于 2013-04-17T10:28:32.927 に答える