css - 印刷時にページ要素が非表示のままにならないのはなぜですか？

Question

「ページを印刷」ボタンがあるWebサイトを作成しています。ページが印刷されるときに、ページの特定の要素（たとえば、左側のナビゲーション、上部のナビゲーションなど）を非表示にします。

私はこれを私のstyle.cssに追加しました：

@media print {
  #topnav { display:none }
  #left-col { display:none }
}

ただし、ページの印刷プレビューを見に行くと、それらの要素はまだそこにあります。

どんな助けでも大歓迎です！

score 1 · Accepted Answer

私はそれを考え出した。それは私の側のコーディングエラーでした。スタイルシートへの元のリンクは次のようになりました。

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

と争いを引き起こしていました。削除media="screen"すると、完全に機能しました。

score 0 · Accepted Answer

次のコードを試すことができます。

HTMLコード

<input type="submit" id="print" value="Submit">

JSコード

$(document).ready(function(){
  $('#print').on('click', function(){
        $('selector i.e #leftnav, #topnav').die();
     });
  });

また

$('selector i.e #leftnav, #topnav').hide();

2 に答える 2