古い記事
ランダムジャンプ
新しい記事
自分用メモ。
画像とテキスト(例えばアイコンとユーザ名)をまとめて一気に表示オンオフ切り替える方法について。
コード貼り付け作業ミニマムで済ますための単純なやりかた。
画像とテキストの組み合わせに限らず、どんな要素の組み合わせでもよい。

表示切替:

表示場所:
hatenacinnamon jkondo naoya



ソースコード:
<style>
.icon {display:inline-block}
.hid {display:none}
</style>
<script>
function switch_display(show, hide) {
    var es = document.getElementsByClassName(show);
    for (var i=0; i<es.length; i++) {
        es[i].style.display = "inline-block";
    }
    var eh = document.getElementsByClassName(hide);
    for (var i=0; i<eh.length; i++) {
        eh[i].style.display = "none";
    }
}
</script>
<p>
表示切替:<br>
<button type="button" onclick="switch_display('hid','icon')">USER-ID</button>
<button type="button" onclick="switch_display('icon','hid')">ICON</button>
</p>
<p>
表示場所:<br>
<span class="icon"><img src="http://www.hatena.ne.jp/users/ha/hatenacinnamon/profile_l.gif"></span>
<span class="hid">hatenacinnamon</span>
<span class="icon"><img src="http://www.hatena.ne.jp/users/jk/jkondo/profile_l.gif"></span>
<span class="hid">jkondo</span>
<span class="icon"><img src="http://www.hatena.ne.jp/users/na/naoya/profile_l.gif"></span>
<span class="hid">naoya</span>
</p>

参考