HTML onbeforeprintイベント属性とは？印刷前の処理を実装する方法を解説
HTMLのonbeforeprintイベント属性は、ページが印刷される直前、または印刷ダイアログボックスが表示される前にスクリプトを実行するための属性です。印刷時だけ特定のスタイルを適用したい場合や、印刷用に画面を調整したい場合などに活用できます。
構文
onbeforeprintイベント属性の基本的な構文は以下のとおりです。
<tagname onbeforeprint="script"></tagname>
それでは、実際にonbeforeprintイベント属性を使用したサンプルコードを見ていきましょう。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
padding: 20px;
}
p {
font-size: 1.1rem;
}
</style>
</head>
<body onbeforeprint="get()">
<h1>HTML onbeforeprint Event Attribute Demo</h1>
<p>I'm a paragraph HTML element with some dummy text.</p>
<p style="color:#db133a;">Now try to print this document.</p>
<div class="show"></div>
<script>
function get() {
document.body.style.background = "lightblue";
}
</script>
</body>
</html>実行結果
上記のコードをブラウザで開くと、次のような画面が表示されます。
この状態で「Ctrl + P」（Macの場合は「Cmd + P」）を押して印刷ダイアログを表示してみてください。印刷操作が行われるタイミングでonbeforeprintイベントが発火し、body要素の背景色が水色（lightblue）に変化します。
ポイントまとめ
- onbeforeprintイベントは、印刷ダイアログが表示される直前に発火する。
- 印刷時に背景画像やグラデーションが消える問題への対策として、単色背景へ切り替える処理などによく使われる。
- 対になるイベントとして、印刷ダイアログを閉じた後に発火するonafterprintイベントも存在する。
このようにonbeforeprintイベント属性を使えば、印刷前に自動でページの見た目を切り替えることができ、ユーザーにとって読みやすい印刷結果を提供できます。ぜひ実際のプロジェクトでも活用してみてください。
-
HTML ondragendイベント属性の使い方を徹底解説
ondragendイベント属性とはHTMLのondragendイベント属性は、HTMLドキュメント内でユーザーが要素やテキストのドラッグを終了した時点で発生するイベントです。ドラッグ&ドロップ操作の一連の流れの最後に実行されるため、ドラッグ完了後の処理(メッセージの表示や状態の更新など)を実装するのに便利です。なお、ondragendイベントはドラッグ元の要素に対して発生する点に注意してください。ドロップ先の要素で発生するのは「drop」イベントであり、役割が異なります。構文ondragendイベント属性の基本的な構文は以下のとおりです。<tagname ondragend=&q
-
HTMLのonpageshowイベント属性とは？使い方をサンプルコード付きで解説
HTMLのonpageshowイベント属性は、ユーザーがWebページへ移動（ナビゲート）したときに発生するイベントです。ページが最初に読み込まれたときはもちろん、ブラウザの「戻る」ボタンなどでキャッシュからページが再表示されたときにも発火する点が大きな特徴です。 構文 onpageshowイベント属性の基本構文は次のとおりです。 <body onpageshow="script"></body> HTML onpageshowイベント属性のサンプル ここでは、ページが表示されたタイミングでアラートを表示するシンプルな例を紹介します。 サンプルコード