getComputedStyle 公司新来的前端妹子竟然连这个都不会~~~

 公司新来了个前端妹子，在写购物车的时候，有一个点击会把隐藏的div显示出来的效果。

通过点击来实现
这样的的效果，但是妹子说她的代码点第一的时候没反应，要点第二次才行，废话不说上代码。

function up(e) {
    var zs = document.querySelector('.tt_zhangsan')
    if (zs.style.display == "none") {
        e.className = "fa fa-chevron-down fa-lg"
        zs.style.display = "block"
    } else {
        e.className = "fa fa-chevron-up fa-lg"
        zs.style.display = "none"
    }
    e.className = "fa fa-chevron-down fa-lg"
}

看到代码我就笑了，她的if判断犯了一个非常经典的js获取css属性值的错误，因为这样获得的值只能从element的行内style里去获取值，这样是获取不到的，所以会直接进行else的代码，于是我进了调试台，果不其然。这是还未点击，当我点击的时候果然如我所料因为获取不到值，所以进行了else的代码，然后点击第二次的时候，进入了if的代码，所以才会出现她的点击两次才出现的情况。
 于是我化身她的救世主，给她if里面的style.display改成了computedStyle，看代码。

function up(e) {
    var zs = document.querySelector('.tt_zhangsan')
    if (getComputedStyle(zs, null).display == "none") {
        e.className = "fa fa-chevron-down fa-lg"
        zs.style.display = "block"
    } else {
        e.className = "fa fa-chevron-up fa-lg"
        zs.style.display = "none"
    }
}

 因为我们一般都不在行内写样式，所以通过js获取值的时候要通过computedStyle这个API来获取，window.computedStyle(element,null)这是标准的格式。
 好了，我又再次的成为了妹子心目中的英雄了!