JavaScriptメモ – スタイルシート、JavaScript で特定要素の表示/非表示を切り替え

Webページ中の特定の要素の表示、非表示を切り替えるなんて処理は頻繁に必要になります。

頻繁に必要になるけれども、いっつも忘れてしまうのでメモ。

要は visible 属性を block (特定の領域を占有する)か、none (表示しない)かに設定すれば良いわけですね。

動作サンプル:


The quick brown fox jumps over the lazy dog.

コードサンプル:

<input type=”button” onclick=”setVisibility('test',true)” value=”make visible”/><br>
<input type=”button” onclick=”setVisibility('test',false)” value=”make invisible”/>
<script>
function setVisibility(id,visible){
document.getElementById(id).style.display = visible ? “block” : “none”;
}
</script>
<div id=”test”>The quick brown fox jumps over the lazy dog.</div>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です