3

我在使用 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;
}

在此先感谢,再次为我的经验不足感到抱歉。

4

1 回答 1

3

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

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

相关问答

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

document.getElementById("img-bubble1").style["z-index"] = "1";
于 2012-11-27T16:33:49.547 回答