div를 이용하여 보였다 안보였다 하기-display 이용 | JAVASCRIPT 팁

div를 이용하여 보였다 안보였다 하기-display 이용

display와 visibility는 언뜻 보면 동일한 기능을 하는 것처럼 보이지만,

display는 속성값이 none 인 경우에는 영역을 차지하지 않고 있지만,

visibility는 속성값이 hidden 인 경우에도 눈에는 보이지 않지만, 영역은 차지하고 있다.

따라서 늘어나고 줄어들고에 따라 보이는 부분이 달라져야 하는 화면에서는 visibility는 적합하지 않다.

<script language="JavaScript">
<!--
    function divView(btnId) {

        var btn = eval("document.images."+btnId);
        var div = eval("document.all.div_"+btnId);

        if(div.style.display=="block") { //block : 눈에 보이는 상태
            btn.src = "/images/button/btn_plus.gif"; 
            div.style.display="none";

            document.all.div_tr.style.display = "none";

        } else { //none : 눈에 안보이는 상태
             btn.src = "/images/button/btn_minus.gif";
            div.style.display="block";

            document.all.div_tr.style.display = "block";
        }

    }
//-->
</script>

<img src="/images/button/btn_plus.gif" alt="클릭시 하단이 늘어납니다." align="absmiddle"
                id="btnTotal" style="cursor:hand" onclick="divView(this.id);">

<table id="div_btnTotal" style="visibility:hidden;">

<tr>

  <td>어쩌구 저쩌구</td>

</tr>

</table>