js-手动伸缩栏

效果展示：

先说效果-点击div盒子高度会伸缩值100px-再点击一次回到初始值；

1、结构搭建

先写4个盒子，给盒子简单设置点样式

    <div></div>  
    <div></div> 
    <div></div> 
    <div></div> 

div{
    width: 500px;
    height: 40px;
    background: pink;
    margin-bottom: 10px;
};

2、写点击变换高度的部分

var oDiv = document.getElementsByTagName("div");//获取div

for(var i = 0;i<oDiv.length;i++){ //利用for循环遍历所有的div
    oDiv[i].onclick = function() {//给所有的div绑定点击注册事件
        //这个地方需要 用this获取具体被点击的元素
        this.style.height = 100 + "px";
    }
}

上面部分 只能让指定被点击的div高度变成100,如果想要在点击一下变回去 我们这个时候需要加个变量作为判断条件了

但是这个时候就会遇到个新的问题，在切换元素的时候 会显示无效果

这个时候可以使用自定义标签属性了

3、最终js代码部分

var oDiv = document.getElementsByTagName("div");
for(var i = 0;i<oDiv.length;i++){
            oDiv[i].tag = true;
            oDiv[i].onclick = function(){
                //4.判断对应标签的状态是true还是false
                if(this.tag == true){
                   //5.给被点击的div设置高度为100
                   this.style.height = "100px"; 
                   this.tag = false;
                }else{
                    this.style.height = "40px"; 
                    this.tag = true;
                }
            }
        }