javascript - 使用 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";