スクロールボックスの高さを変更

JavaScriptで、スクロールボックスの高さを拡大縮小し、隠れているテキストを表示させたり戻したりするサンプル。

jQueryを使って作る方法については、「jQueryを使い、スクロールボックスの高さを変更」のページへ。

実装例

詳細

用語A
用語Aの説明文1
用語Aの説明文2
用語B
用語Bの説明文1
用語C
用語Cの説明文1
用語Cの説明文2
用語Cの説明文3
用語D
用語Dの説明文1
用語E
用語Eの説明文1
用語Eの説明文2

実装例(サンプル)の動作について

  1. 「全表示」ボタンをクリックすると、ベージュ色のボックス要素の高さを、コンテンツを全て表示できる高さまで拡大する。ボタンのテキストが、「戻す」に変わる。
  2. 「戻す」ボタンをクリックすると、元のスクロールボックスに戻る。

ソースコード

JavaScript

<script type="text/javascript">
window.onload = function () {
    var $flag = true;
    document.getElementById( "sampleButton" ).onclick = function(){
        if( $flag ){
            $flag = false;
            document.getElementById( "sampleBox" ).style.height = "auto";
            this.innerHTML = "戻す";
        }else{
            $flag = true;
            document.getElementById( "sampleBox" ).style.height = "130px";
            this.innerHTML = "全表示";
        }
    };
}
</script>

HTML

<div id="sampleWrap">
    <div id="sampleHeader">
        <h2>詳細</h2>
        <button id="sampleButton">全表示</button>
        <div style="clear: both;"></div>
    </div>
    <div id="sampleBox">
        <dl>
            <dt>用語A</dt>
                <dd>用語Aの説明文1</dd>
                <dd>用語Aの説明文2</dd>
            <dt>用語B</dt>
                <dd>用語Bの説明文1</dd>
            <dt>用語C</dt>
                <dd>用語Cの説明文1</dd>
                <dd>用語Cの説明文2</dd>
                <dd>用語Cの説明文3</dd>
            <dt>用語D</dt>
                <dd>用語Dの説明文1</dd>
            <dt>用語E</dt>
                <dd>用語Eの説明文1</dd>
                <dd>用語Eの説明文2</dd>
        </dl>
    </div>
</div>

CSS

<style>
#sampleWrap {
    padding: 10px;
    width: 300px;
    background-color: gold;
    border: 1px solid gray;
    border-radius: 10px;
}
#sampleHeader h2 {
    float: left;
    margin: 0;
    padding: 0;
    font-size: 16px;
    background: none;
    border: none;
}
#sampleButton {
    float: right;
    font-size: 16px;
}
#sampleBox {
    padding: 10px;
    width: 280px;
    height: 130px;
    overflow: auto;
    background-color: #f5f5dc;
    line-height: 1.5em;
    font-size: 16px;
    border: 1px solid gray;
}
</style>

スポンサード リンク

カテゴリー: JavaScript, サイズ, スクロール, 逆引き パーマリンク