style.pageBreakBeforeは、要素のスタイル属性のpage-break-beforeプロパティの値を取得、もしくは、設定するプロパティ。
page-break-beforeプロパティは、指定要素の直前で改ページするかしないかを指定することができる。
構文
取得
var $pageBreakBefore = $elementReference.style.pageBreakBefore;
戻り値
要素のスタイル属性のpage-break-beforeプロパティの値。
設定
$elementReference.style.pageBreakBefore = "auto | always | avoid | left | right | inherit";
- auto | always | avoid | left | right | inherit
- 下記の何れかの値で指定する。初期設定値は「auto」。
- auto：自動。
- always：指定要素の直前で改ページする。
- avoid：指定要素の直前では改ページしない。
- left：指定要素の直前で改ページし、指定要素を見開き左ページに印刷。
- right：指定要素の直前で改ページし、指定要素を見開き右ページに印刷。
- inherit：親要素の設定を継承。
サンプル
サンプルのpage-break-beforeプロパティの値：
サンプル要素１
サンプル要素２
サンプル要素３
サンプルの動作について
各ボタンをクリックすると、ボタン名のテキストを、「サンプル要素１～３」の「page-break-beforeプロパティ」の値に設定する。設定値を「サンプルのpage-break-beforeプロパティの値：」の右横に表示する。ブラウザの印刷プレビュー画面で違いを比べてみて。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setPageBreakBefore( $pageBreakBefore ) {
var $elements = document.getElementById( "sample" ).getElementsByTagName( "p" );
for( $i=0; $i < $elements.length; $i++ ){
$elements[$i].style.pageBreakBefore = $pageBreakBefore;
}
var $pageBreakBefore = $elements[0].style.pageBreakBefore;
document.getElementById( "sampleOutput" ).innerHTML = $pageBreakBefore;
}
</script>
function setPageBreakBefore( $pageBreakBefore ) {
var $elements = document.getElementById( "sample" ).getElementsByTagName( "p" );
for( $i=0; $i < $elements.length; $i++ ){
$elements[$i].style.pageBreakBefore = $pageBreakBefore;
}
var $pageBreakBefore = $elements[0].style.pageBreakBefore;
document.getElementById( "sampleOutput" ).innerHTML = $pageBreakBefore;
}
</script>
HTML
<button onclick="setPageBreakBefore('auto');">auto</button>
<button onclick="setPageBreakBefore('always');">always</button>
<button onclick="setPageBreakBefore('avoid');">avoid</button>
<button onclick="setPageBreakBefore('left');">left</button>
<button onclick="setPageBreakBefore('right');">right</button>
<button onclick="setPageBreakBefore('inherit');">inherit</button>
<br />
<p>サンプルのpage-break-beforeプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="padding: 10px; border: 1px solid red; background-color: yellow;">
<p>サンプル要素１</p>
<p>サンプル要素２</p>
<p>サンプル要素３</p>
</div>
<button onclick="setPageBreakBefore('always');">always</button>
<button onclick="setPageBreakBefore('avoid');">avoid</button>
<button onclick="setPageBreakBefore('left');">left</button>
<button onclick="setPageBreakBefore('right');">right</button>
<button onclick="setPageBreakBefore('inherit');">inherit</button>
<br />
<p>サンプルのpage-break-beforeプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="padding: 10px; border: 1px solid red; background-color: yellow;">
<p>サンプル要素１</p>
<p>サンプル要素２</p>
<p>サンプル要素３</p>
</div>