js中div的显示和隐藏

一.方式1：隐藏后仍占有页面空间，显示空白
    div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白
    style="visibility: none;"      //在Div中设置style属性
    document.getElementById("typediv1").style.visibility="hidden";//隐藏
    document.getElementById("typediv1").style.visibility="visible";//显示

二.方式2：隐藏后释放占用的页面空间
    通过设置display属性可以使div隐藏后释放占用的页面空间，如下
    style="display: none;"         //在Div中设置style属性

    document.getElementById("typediv1").style.display="none";//隐藏
    document.getElementById("typediv1").style.display="";//显示
 

my$("btn").onclick = function () {
    //判断当前value值得属性
    if(this.value == "隐藏"){
        my$("dv").style.display = "none";//设置隐藏样式
        this.value = "显示"
    }else if(this.value == "显示"){
        my$("dv").style.display = "block";
        this.value = "隐藏"
    }
}


通过类名设置
my$("btn").onclick = function () {
    //判断当前value值得属性
    if(this.value == "隐藏"){
        my$("dv").className = "none";//设置隐藏样式
        this.value = "显示"
    }else if(this.value == "显示"){
        //  空字符串 即 清除
        //  用 className   添加类名  会覆盖原有的类名
        my$("dv").className = "";
        this.value = "隐藏"
    }
}