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

実行結果

親要素を表示・非表示にすると、子要素も親要素に従って表示・非表示になります。

親要素
子要素

ソース

<script type="text/javascript">
    /* 動作確認:IE5~,Firefox,NN6~ */
    var pc=true;

    function func_pc(frm){
        var obj=document.getElementById("parent");
        if(pc){
            pc=false;
            frm.elements["btn_pc"].value="visibility:visible";
            obj.style.visibility="hidden";
        }else{
            pc=true;
            frm.elements["btn_pc"].value="visibility:hidden";
            obj.style.visibility="visible";
        }
    }
</script>

<form action="#">
    <p>
        親要素を表示・非表示にすると、子要素も親要素に従って表示・非表示になります。
    </p>
    <p>
        <input type="button" name="btn_pc" value="visibility:hidden" onclick="func_pc(this.form)" />
    </p>
    <div id="parent">親要素
        <div id="child">子要素</div>
    </div>
</form>

polarized women