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>
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>
<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>