style.overflowは、要素のスタイル属性のoverflowプロパティの値を取得、もしくは、設定するプロパティ。
overflowプロパティは、ブロックレベル要素の領域に内容が収まりきらなかったときの表示方法を指定することができる。
構文
取得
var $overflow = $elementReference.style.overflow;
戻り値
要素のスタイル属性のoverflowプロパティの値。
設定
$elementReference.style.overflow = "value";
- value
- 下記の何れかの値を指定する。初期設定値は「visible」。
- visible：収まりきらなかった内容は、領域からはみ出して表示する。
- hidden：収まりきらなかった内容は、表示しない。
- scroll：スクロールバーが現れ、収まりきらなかった内容はスクロールで表示する。
- auto：自動。ブラウザによるが、収まりきらなかった内容はスクロールで表示させることが多い。
サンプル
サンプル要素の変更後のoverflowプロパティの値：
サンプル要素
- 項目
- 項目
- 項目
- 項目
- 項目
- 項目
- 項目
- 項目
- 項目
- 項目
サンプルの動作について
- 「visible」ボタンをクリックすると、収まりきらなかった内容を、領域からはみ出して表示する。「サンプル要素の変更後のoverflowプロパティの値：」の右横に「visible」と表示する。
- 「hidden」ボタンをクリックすると、収まりきらなかった内容は表示しない。「サンプル要素の変更後のoverflowプロパティの値：」の右横に「hidden」と表示する。
- 「scroll」ボタンをクリックすると、スクロールバーが現れ、収まりきらなかった内容はスクロールで表示する。「サンプル要素の変更後のoverflowプロパティの値：」の右横に「scroll」と表示する。
- 「auto」ボタンをクリックすると、ブラウザが自動的に判断する。スクロールで表示させることが多い。「サンプル要素の変更後のoverflowプロパティの値：」の右横に「auto」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setOverflow( $overflow ) {
var $element = document.getElementById( "sample" );
$element.style.overflow = $overflow;
var $overflow = $element.style.overflow;
document.getElementById( "sampleOutput" ).innerHTML = $overflow;
}
</script>
function setOverflow( $overflow ) {
var $element = document.getElementById( "sample" );
$element.style.overflow = $overflow;
var $overflow = $element.style.overflow;
document.getElementById( "sampleOutput" ).innerHTML = $overflow;
}
</script>
HTML
<button onclick="setOverflow('visible');">visible</button>
<button onclick="setOverflow('hidden');">hidden</button>
<button onclick="setOverflow('scroll');">scroll</button>
<button onclick="setOverflow('auto');">auto</button>
<br />
<p>サンプル要素の変更後のoverflowプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="margin: 20px 20px 100px 20px; padding: 10px 20px;width: 500px; height: 200px; border: 1px solid red; background-color: yellow;">
サンプル要素
<ol>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
</ol>
</div>
<button onclick="setOverflow('hidden');">hidden</button>
<button onclick="setOverflow('scroll');">scroll</button>
<button onclick="setOverflow('auto');">auto</button>
<br />
<p>サンプル要素の変更後のoverflowプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="margin: 20px 20px 100px 20px; padding: 10px 20px;width: 500px; height: 200px; border: 1px solid red; background-color: yellow;">
サンプル要素
<ol>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
</ol>
</div>