javascript实现层div的显示和隐藏效果

javascript实现层div的显示和隐藏效果,用javascript设置css的display属性为block（显示）和none（隐藏）,代码如下:
[html]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>javascript实现层div的显示和隐藏效果</title>
<script type="text/JavaScript">
    function toggle(targetid)
    {
        if (document.getElementById)
        {
            target=document.getElementById(targetid);
            hideShowButtonObj=document.getElementById('butn');
            if (target.style.display=="block")
            {
                target.style.display="none";
                hideShowButtonObj.value="+Show"
                hideShowButtonObj.style.fontWeight = "bold";
            }
            else
            {
                hideShowButtonObj.value="-Hide"
                hideShowButtonObj.style.fontWeight = "bold";
                target.style.display="block";
                target.style.marginLeft = "50px";
            }
        }
        window.event.cancelBubble = true;
        return false;
    }
</script>
<style type="text/css">
    #div1
    {
        background-color:#000000;
        height:400px;
        width:400px;
        display:none;
    }
    #configuration_secion
    {
        FONT-SIZE: x-small;
        WIDTH: 100%;
        COLOR: #555555
    }
    #butn
    {
        FONT-WEIGHT: bold
    }
</style>
</head>
<body>
    <input type="button" id="butn" value="+Show" onclick="toggle('helloworld')">
    </input>
    <div style="display:none" width="100%" class="ValueText" id="helloworld">
    Hello<br>
    World<br>
    </div>
</body>
</html>

摘自 Something的专栏

补充：web前端 , JavaScript ,