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

我的 JavaScript 有问题。这几乎肯定是我做错了，因为我对 js 很陌生。我正在尝试将 div 标签的 z 索引从 -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;
}

预先感谢，并再次为我的经验不足表示歉意。

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

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

相关问答

编辑：为后代提供的附加信息，正如 khanahk 在评论中所说，变量名称中的连字符将被解释为减号，这不是有效的赋值语法。一个有趣且不建议解决这个问题的方法是使用括号表示法：

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