JavaScriptで要素の表示と非表示(サンプル)

2009/02/06 16:42 Update
TAGS: JavaScript | display | 表示 | 非表示 | 切替 | サンプル
JavaScriptで要素を表示/非表示させる方法、および表示/非表示の自動切替のサンプルです。

概要


要素のstyle属性にはdisplayという属性があります。displayに「'block'」や「'none'」を設定することによって、表示や非表示を切り替えることができます。

'block':表示
'none':非表示

サンプル


<script language="javascript" type="text/javascript">
/** 
 * 要素を表示/非表示させる
 * @id 要素のID
 * @visible true(表示) または false(非表示)
 */
function visibleElement(id,visible){
    document.getElementById(id).style.display = visible ? "block" : "none";
}

/** 
 * 表示/非表示の自動切換え
 * @id 要素のID
 * @visible true(表示) または false(非表示)
 */
function changeVisibility(id){
    var ele = document.getElementById(id);
    if (ele.style.display == 'none') {
        //元々は'none'(非表示)の場合、表示させる
        ele.style.display = 'block';
    } else {
        //非表示にする
        ele.style.display = 'none';
    }
}
</script>

<a href="#" onclick="changeVisibility('myEle');">表示・非表示の自動切換え</a> | 
[<a href="#" onclick="visibleElement('myEle', true);">表示</a> | <a href="#" onclick="visibleElement('myEle', false);">非表示</a>]
<div id="myEle">表示されるものだよ</div>


実際の動作
表示・非表示の自動切換え |  [表示 | 非表示]
表示されるものだよ

Sponsored Link


有关作者
Syboos.jp編集長AJavaやオープンソース情報の執筆、Webサイトの開発や運営全般の業務に携わる。

Comments