在JavaScript中，有什么方法可以改变html元素的z-Index值，就像它们是数字而不是字符串一样？

Question

我对JavaScript相当陌生。我的网站上有几个可拖动的div元素，它们的外观和行为就像桌子上的卡片。当一个元素被点击和拖动时，它的z-index会改变到最上面的位置，而其他元素的z-index会向下移动一个位置。这就使所有元素保持了用户放置的正确顺序，因此当它们被堆叠和移动时，看起来很自然。

下面的代码在3个元素的情况下可以顺利工作，其中我使用if语句手动检查和改变每个zIndex值，但随着我添加更多的可拖动元素（计划是至少有10个），这种方法会变得成倍地复杂。我希望能从所有其他可拖动元素的 zIndex 中减去 1。我不能这样做，因为 zIndex 是一个字符串值而不是数字。有什么方法可以解决这个问题吗？将字符串值视为数字的方法，这样我就可以进行运算了吗？如果有任何帮助，我将非常感激。

注意：下面的代码是专门处理 "card1 "元素的元素拖动函数的一部分，我没有包含全部内容，因为这是唯一处理zIndex的部分。

//change the zIndexes when card1 is moved

elmnt.style.zIndex = "3"; //places card1 on top

//check zIndex positions of card2 and card3 and lower them by 1
    if (document.getElementById("card2").style.zIndex == "3"){
        if (document.getElementById("card3").style.zIndex == "2"){
            document.getElementById("card3").style.zIndex = "1";
            document.getElementById("card2").style.zIndex = "2";
        }
        else {
            document.getElementById("card2").style.zIndex = "2";
        }
    }
      
    if (document.getElementById("card3").style.zIndex == "3"){
        if (document.getElementById("card2").style.zIndex == "2"){
            document.getElementById("card2").style.zIndex = "1";
            document.getElementById("card3").style.zIndex = "2";
        }
        else {
            document.getElementById("card3").style.zIndex = "2";
        }
    }