Webページの印刷時に要素を非表示にするには？

私のウェブページには、ウェブページを印刷するためのリンクがあります。しかし、そのリンクはプリントアウト自体にも表示されています。

印刷用のリンクをクリックしたときに、リンクボタンを隠すようなjavascriptやHTMLコードはありますか？

例

 "Good Evening"
 Print (click Here To Print)

この"Print"ラベルを、"Good Evening"というテキストを印刷するときに非表示にしたいのです。印刷物には表示されません。

TRiG
編集された質問 14日 10月 2015 в 11:14
プログラミング
printing css
10日 12月 2008 в 7:11
25 ビュー

スタイルシートには

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

そして、ボタンなど印刷版に表示したくないHTMLには、class='no-print'を追加してください（または、既存のclass文にno-print classを追加してください）。

The Guy with The Hat
編集した答え 4日 12月 2018 в 3:22
解説 (8)

ベストプラクティスは、印刷専用のスタイルシートを使用し、そのmedia属性をprintに設定することです。

その中で、紙に印刷したい要素の表示/非表示を設定します。

rudolph1024
編集した答え 17日 7月 2015 в 8:55
解説 (2)

リンクをdiv内に配置し、アンカータグにJavaScriptを使用して、クリックされたときにdivを隠すことができます。例（テストしていないので、微調整が必要かもしれませんが、イメージはつかめると思います）。

<div id="printOption">
    <a href="javascript:void();" 
       onclick="document.getElementById('printOption').style.visibility = 'hidden'; 
       document.print(); 
       return true;">
       Print
    </a>
</div>

欠点は、一度クリックするとボタンが消えてしまい、そのページのオプションがなくなってしまうことです（Ctrl+Pは常にありますが）。

より良い解決策は、印刷スタイルシートを作成し、そのスタイルシート内で printOption ID (または任意の名称) の非表示状態を指定することです。 これをHTMLのheadセクションで行い、media属性を持つ2つ目のスタイルシートを指定することができます。

Lucky
編集した答え 14日 3月 2017 в 1:23
解説 (0)