Updating z-index with javascript invalid left-hand

Question

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:

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

Thanks in advance, and sorry again for my inexperience.

Answer 1

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

Related Q/A

Edit: 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";