by shigemk2

当面は技術的なことしか書かない

emptyとdisplay noneとvisibility hiddenの違いについて

jQuery(document).ready(function($){
    $('a.other').click(function(){
       $("div#time").css('visibility','hidden');
       return false;
    });
  });

まあ、こんな感じのjavascriptがあったとしましょう。クリックしたら消える(厳密に言うと見えなくする)
というやつです。
emptyとdisplay noneとvisibility hiddenで何が違うのか。

empty()

要素自体の削除。消した要素は元には戻らないので、もう一度要素を追加(append)しないといけない。

css('display', 'none')

要素を見えなくする。見えなくするのだが、その要素を削除して見えなくするので、次の要素を詰める

css('visibility', 'hidden')

要素を見えなくするのだが、見えなくした要素はそのまま残るから次の要素は移動しない

例えば、こんな感じの超簡単なHTMLを作成しましょう。結果は推して知るべし、「ほむら」と「まどか」が表示されるだけの簡単なやつ。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./js/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<div id="hoge">
ほむら
</div>
<script type="text/javascript">//<!--
jQuery(document).ready(function($){
    $("div#hoge").css('visibility','hidden');
    // $("div#hoge").empty(); 
    // $("div#hoge").css('display','none');
    return false;
  });
//--></script>
<div id="homu">
まどか
</div>

もとのHTMLはこちら

emptyとdisplay noneはこちら

visibility hiddenはこちら

まあ、いろいろと使い分けたら良いと思うよ。
ちなみに、アンカータグにはempty,display none,visibility hiddenいずれを使っても
リンクには飛びません。