PHP & JavaScript Room :: 設置サンプル

<script type="text/javascript">
    var v=true;
    var d=true;

    /* visiblity 切替 */
    function func_v(frm){
        if(v){
            v=false;
            frm.elements["btn_v"].value="visibility:visible";
            frm.elements["elm_v"].style.visibility="hidden";
        }else{
            v=true;
            frm.elements["btn_v"].value="visibility:hidden";
            frm.elements["elm_v"].style.visibility="visible";
        }
    }
    /* display 切替 */
    function func_d(frm){
        if(d){
            d=false;
            frm.elements["btn_d"].value="display:inline";
            frm.elements["elm_d"].style.display="none";
        }else{
            d=true;
            frm.elements["btn_d"].value="display:none";
            frm.elements["elm_d"].style.display="inline";
        }
    }
</script>

<form action="#">
    <p>
        visibility:none / visible を切替表示<br>
        <input type="button" name="btn_v" value="visibility:hidden" onclick="func_v(this.form)" />
        <input type="text" name="elm_v" value="要素" size="8" />
        ←要素の描画領域は確保される
    </p>
    <p>
        display:none / inline を切替表示<br>
        <input type="button" name="btn_d" value="display:none" onclick="func_d(this.form)" />
        <input type="text" name="elm_d" value="要素" size="8" />
        ←要素の描画領域は確保されない
    </p>
</form>