入js坑之：js点击显示再点击隐藏的效果

今天写一个模板里面需要有一个商品的条件查询版块，就是列出来很多商品属性让用户点击选择的东西。

其中有一个需求是：初始板块排列只显示一行，有一个“更多”按钮，点击后显示出所有。

然后就只能又开始硬着头皮写js了...

初始成果如下：

function ces(){
    var divContainer=document.getElementById('zxxgnone3');
    if(divContainer.style.height==""||divContainer.style.height=="30px"){
        divContainer.style.height="auto";
    }else{
        divContainer.style.height="30px";
    }
}

然后html里面直接onclick="ces()"。

但是我马上发现一个页面需要有多个这种效果，连js的门都没摸到的我顿时懵逼了，在群里求助得到的答案是”传值“，传值后的代码如下：

function ces(id){
    var divContainer=document.getElementById(id);
    if(divContainer.style.height==""||divContainer.style.height=="30px"){
        divContainer.style.height="auto";
    }else{
        divContainer.style.height="30px";
    }
}

html页面调用代码为onclick="ces('指定的id值')"。

弄完之后就觉得html和css对比起js来，简直是。。。

js的各种属性太多了！只好慢慢学。