javascript - 使用按钮在两种状态之间切换

Question

本质上，我想使用一个按钮使用 CSS 将一个 div 带到前面z-index，然后当再次按下该按钮时，我希望它恢复到原来的状态。

这是我到目前为止得到的代码，它会很高兴第一次改变它，但它不会恢复它。

function thumbnail(){
    if (document.getElementById("div").style.zIndex= -3){
        document.getElementById("div").style.zIndex= -2;
    }

    if  (document.getElementById("div").style.zIndex= -2){
        document.getElementById("div").style.zIndex= -3;
    }       
}

Answer 1

function thumbnail(){
    var depth = document.getElementById("div").style.zIndex;
    document.getElementById("div").style.zIndex = (depth == -3)? -2 : -3;
}

Answer 2

这个稍微高效一点的版本避免了多次遍历 DOM：

function thumbnail () {
    var elStyle = document.getElementById ("div").style;
    elStyle.zIndex = elStyle.zIndex == -3 ? -2 : -3;
}

当您稍后返回此代码时，使用div作为 id 可能会令人困惑，请使用标识 div 功能的名称。