ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript CSSコントロールの印刷フォーマット例紹介_JavaScriptスキル

JavaScript CSSコントロールの印刷フォーマット例紹介_JavaScriptスキル

WBOY
WBOYオリジナル
2016-05-16 17:05:071347ブラウズ

1. media="print" の CSS を使用して、印刷するファイル testPrint.html のスタイルを制御します。これはメディアを print として参照します。つまり、スタイルは

の印刷時にのみ有効になります。 コードをコピーします コードは次のとおりです:



/style/print.css ファイル
コピーcode コードは次のとおりです:

.noprint{display:none;}

print.css のスタイルを使用します。 testPrint.html では、効果は Web ページの閲覧時には表示されませんが、次の段落のように印刷時には機能します。 noprint を追加した後でも、ブラウザーではまだ現実的ですが、印刷時には表示されません。
コードをコピーします コードは次のとおりです:




もちろん、print.cssに好きなスタイルを書いて、色を変更したり(カラー画像。白黒プリンタでは効果が良くありません。別のスタイルで印刷できます)、任意のフォントなど、次のように使用できます。あなたは好きです ----------------- --------------- -------------------------

2. 何らかの理由で

を制御するために JavaScript を使用するCSS にあまり熟練していない人もいるかもしれませんし、JavaScript の方が得意な人もいるかもしれません。

コードをコピー コードは次のとおりです:



このテキストは印刷されません



印刷する前に、window.onbeforeprint 関数が呼び出されます。このとき、自由に創意工夫を使って HTML を再構築し、それを印刷します。もちろん、印刷後は通常、それを元に戻す必要があります。これは window.onafterprint 関数

---------------------- --------- ----------------------------------

ヒント: 注意してください。印刷については、誰もが知っています。これは window.print() です。実際、window.top.centerFrame.MainFrame.print(); などのフレームを印刷することもできます。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。