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