使用javascript更新z-index无效左侧的赋值 [英] Updating z-index with javascript invalid left-hand side in assignment

问题描述

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

I'm having a problem with Javascript. It's almost certainly something I'm doing wrong as I'm quite new to js. I'm trying to modify a div tag's z-index to 1 from -1 so an image contained in it appears in front of the other images, but keep on getting "invalid left-hand side in assignment" as an error. I've tried searching the net, but could not find a solution, probably because I'm making a rudimentary mistake. Snippets of my code are as follows:

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

html：

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：

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;
}

提前致谢，再次抱歉我的经验不足。

Thanks in advance, and sorry again for my inexperience.

推荐答案

在javascript中查询CSS属性时，任何带有连字符的内容都会转换为驼峰大小写。请尝试这样做：

When addressing CSS properties in javascript, anything that has a hyphen is transformed to camel case. Try this instead:

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

相关Q / A

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

Additional information for posterity, as said by khanahk in a comment, a hyphen in a variable name will be interpreted as a minus sign, and this is not valid assignment syntax. An interesting and not recommended way around this is to use bracket notation instead:

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

这篇关于使用javascript更新z-index无效左侧的赋值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！