在分配中使用 javascript 无效的左侧更新 z-index

Question

我遇到了 Javascript 问题。几乎可以肯定我做错了什么，因为我对 js 很陌生。我正在尝试将 div 标签的 z-index 从 -1 修改为 1，以便其中包含的图像出现在其他图像的前面，但继续将“分配中无效的左侧”作为错误。我试过在网上搜索，但找不到解决方案，可能是因为我犯了一个基本错误。我的代码片段如下：

JavaScript：

function bubble1()
{       
    document.getElementById("img-bubble1").style.z-index = "1";//this is the line it crashes on     
    bubble2move = setInterval(function() {bubble2()}, 2000);
}   

html:

<td width="50%">
    <div class='image-window'>
        <div id="img-bubble1" class='img img-bubble hide'><img src="../img/img-bubble1.gif"/></div>
        <div id="img-bubble2" class='img img-bubble hide'><img src="../img/img-bubble2.gif"/></div>             
    </div>
</td>

CSS：

.image-window
{
    width: 435px;
    height: 400px;
    float: left;
    position: relative;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

#img-bubble1, #img-bubble2
{
    position: absolute;
    z-index: -1;
}

.img-bubble
{
    width: 206.25px;
    height: 400px;
    position: absolute;
    top: 0;
    right: 0;
}

在此先感谢，再次对我的经验不足表示歉意。

Answer 1

在 javascript 中处理 CSS 属性时，任何带有连字符的内容都会转换为驼峰式。试试这个：

document.getElementById("img-bubble1").style.zIndex = "1";

Related Q/A

编辑：后人的附加信息，正如 khanahk 在评论中所说，变量名中的连字符将被解释为减号，这不是有效的赋值语法。一个有趣且不推荐的方法是改用括号表示法：

document.getElementById("img-bubble1").style["z-index"] = "1";