jQueryで要素の表示と非表示を行う方法その3【visibility】

.NET開発者のためのブログメディア

jQueryでは、CSSのvisibilityプロパティを使うことで要素の表示・非表示を切り替えることができます。今回は、visibilityプロパティの概要や使い方を解説していきます。ぜひ、参考にしてみてください。

PL: visibilityプロパティを使うと、隠された要素の中の一部だけを表示するなどの小回りが効くんですよ。

PG: なるほど…！

visibilityプロパティとは

visibilityプロパティは、要素の表示形式を変更できるCSSのプロパティの一つ。visibilityプロパティでは、以下のような値を使ってjQueryの中で次のように記述します。
■要素を表示
要素名.style.visibility = “visible”;

■要素の非表示
要素名.style.visibility = “hidden”;

■要素を詰めて非表示
要素名.style.visibility = “collapse”;

同じように表示・非表示を切り替えるプロパティに [display: none] が挙げられますが、displayプロパティは要素分の領域を詰めるのに対し、visibilityプロパティでは要素分の領域を確保するため、レイアウトが崩れにくいというメリットがあります。

ただし、一点注意点として“Internet Explorerには対応していない”ということを覚えておきましょう。

＜補足＞
Internet Explorer（IE）は、今回のvisibilityプロパティをはじめ他のプロパティなどにも対応していないことが多いです。開発を行う環境としてIEは優れていないため、もし現在IEを使用しているのであれば他のブラウザに切り替えることをおすすめします。

visibilityプロパティを使って表示・非表示を切り替えてみよう

ここでは、実際にvisibilityプロパティを使って要素の表示・非表示を切り替えていきます。
ソースコードは次のとおりです。

<script>
// ロゴを可視
     function visible(){
        var logo1 = document.getElementById("limitedLogo");
        logo1.style.visibility = "visible";
     }
     // ロゴを不可視
     function unvisible(){
        var logo1 = document.getElementById("limitedLogo");
        logo1.style.visibility = "hidden";
     }
</script>

// ロゴを可視

function visible(){

var logo1 = document.getElementById("limitedLogo");

logo1.style.visibility = "visible";

}

// ロゴを不可視

function unvisible(){

var logo1 = document.getElementById("limitedLogo");

logo1.style.visibility = "hidden";

}

</script>

<div class="logo_disp">
    <img id="limitedLogo" class="logo" src="logo.png"><br/>
    <div>
      <input type="button" value="表示" onclick="visible();"/>
       <input type="button" value="非表示" onclick="unvisible();"/>
   </div>
</div>

<div>

</div>

実行すると、次のような結果になります。
実行結果

では、真ん中のロゴを非表示にしてみましょう。
非表示ボタンを押す

すると・・・
非表示にした結果

ロゴは非表示となっていますが、ロゴがあった場所は残っていることが分かりますね。これがvisibilityプロパティの最大の特徴です。ちなみにvisibilityプロパティを使わずに [display] プロパティを使うと、次のような表示となります。
displayプロパティの場合

PL: このように、それぞれのプロパティやメソッドの特徴を知っておくと、ウェブページを作成するときにも役立ちますよ。

PG: 分かりました！

必要に応じてvisibilityプロパティを活用していこう

jQueryでは表示・非表示を切り替えるためのさまざまなプロパティやメソッドが用意されているため、比較的visibilityプロパティの出番は少ないかもしれません。しかし、“要素分の領域を確保したまま非表示にできる”という特徴があるなど、使い方によっては非常に便利なプロパティなので、ぜひ上手く活用してみてください。