请问如何用javascript控制z-index的值？

我想利用js通过控制z-index的值大小、结合display来控制背景图片的显示。主要应用在导航这块，本人对js不熟悉，希望同志们能帮我，谢谢！

解决方案 »

  1.   

    element.style.zIndex = 12;<html>
    <head>
    <style type="text/css">
    .box{
    position:absolute;
    width:100px;
    height:100px;
    }
    .red{background-color:red;}
    .green{background-color:green;}
    #box_red{left:10px;top:50px;}
    #box_green{left:50px;top:100px;}
    </style>
    </head>
    <body>
    <div>
    <input id="btn_red" type="button" value="红框居顶"/>
    <input id="btn_green" type="button" value="绿框居顶"/>
    </div>
    <div id="box_red" class="box red"></div>
    <div id="box_green" class="box green"></div>
    <script>
    window.onload = function() {
    var top_zIndex = 1,
    btn_red = document.getElementById("btn_red"),
    btn_green = document.getElementById("btn_green"),
    box_red = document.getElementById("box_red"),
    box_green = document.getElementById("box_green");
    btn_red.onclick = function() {
    box_red.style.zIndex = top_zIndex++;
    };
    btn_green.onclick = function() {
    box_green.style.zIndex = top_zIndex++;
    };
    };
    </script>
    </body>
    </html>
      

  2.   

    所有的style样式中间的-号都省略掉。后面的单词大写大叔周末都在 真强悍
      

  3.   

    感谢zswang及各位的回答，没有及时结贴望原谅！