style.pageBreakInsideプロパティ

style.pageBreakInsideは、要素のスタイル属性のpage-break-insideプロパティの値を取得、もしくは、設定するプロパティ。

page-break-insideプロパティは、指定要素の内部での改ページを禁止するかしないかを指定することができる。

構文

取得

var $pageBreakInside = $elementReference.style.pageBreakInside;

戻り値

要素のスタイル属性のpage-break-insideプロパティの値。

設定

$elementReference.style.pageBreakInside = "auto | avoid inherit";
auto | avoid inherit
下記の何れかの値で指定する。初期設定値は「auto」。
  • auto:自動。
  • avoid:指定要素の内部での改ページを禁止。
  • inherit:親要素の設定を継承。

サンプル


サンプルのpage-break-insideプロパティの値:














サンプルの動作について

各ボタンをクリックすると、ボタン名のテキストを、サンプル要素の「page-break-insideプロパティ」の値に設定する。設定値を「サンプルのpage-break-insideプロパティの値:」の右横に表示する。ブラウザの印刷プレビュー画面で違いを比べてみて。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setPageBreakInside( $pageBreakInside ) {
 var $element = document.getElementById( "sample" );
 $element.style.pageBreakInside = $pageBreakInside;
 var $pageBreakInside = $element.style.pageBreakInside;
 document.getElementById( "sampleOutput" ).innerHTML = $pageBreakInside;
}
</script>

HTML

<button onclick="setPageBreakInside('auto');">auto</button>
<button onclick="setPageBreakInside('avoid');">avoid</button>
<button onclick="setPageBreakInside('inherit');">inherit</button>
<br />
<p>サンプルのpage-break-insideプロパティの値:<span id="sampleOutput"></span></p>
<div id="sample" style="padding: 10px; border: 1px solid red; background-color: yellow;">
 <br />
 サ
 <br />
 <br />
 ン
 <br />
 <br />
 プ
 <br />
 <br />
 ル
 <br />
 <br />
 要
 <br />
 <br />
 素
 <br />
 <br />
</div>

スポンサード リンク

カテゴリー: DOM, JavaScript, Styleオブジェクト, プロパティ, リファレンス, 印刷 パーマリンク