Question

我正在筹码任意三张照片。当我点击其中一个时，我点击的那个应该显示在顶部。

我希望你能帮助我完成我的代码。我已经在标题中提到了。这里我附加了body，style和java Script。每一个都很好，但我仍然无法解决这个问题。

 <!Doctype>
 <html>
 <head>
 <style>
    div {
        width:420px;
        height:300px;
    }
    div.box1 {
        background:#dad7d7;
        position:relative;
        z-index:1;
    }
    div.box2 {
        background:#ffe7bc;
        position:relative;
        top:-200px;
        left:50px;
        z-index:2;
    }
    div.box3 {
        background:#fc9458;
        position:relative;
        top:-360px;
        left:100px;
        z-index:2;
        }
  </style>  
 </head>
<body>
<div class="box1"> <img class = "imagel" id = "imagel" height = "300" width = "420" src = "images/image1.png" 
    alt = "(Image1)" onclick = "toTop('image1')" />   </div>
<div class="box2"> <img class = "image2" id = "image2" height = "300" width = "420" src = "images/image2.png" 
    alt = "(Image2)" onclick = "toTop('image2')" />   </div>
<div class="box3"> <img class = "image3" id = "image3" height = "300" width = "420" src = "images/image3.png" 
    alt = "(Image3)" onclick = "toTop('image3')" />    </div>
 </body>
 </html>

此处为JavaScript

 <script> 
 var topp = "image3"; 
 function toTop(newTop) {
 var domTop document.getElementById(topp).style; 
 var domNew document.getElementByld(newTop).style; 

 domTop.zIndex = "0"; 
 domNew.zIndex = "10"; 
 topp = newTop; 
}   
</script>

Answer 1

您好像是使用.box类将zIndex属性设置为div元素。

我建议您执行document.getElementById(topp).parentElement.style或传递父类。此外，你在这里忘了你的等号

var domTop document.getElementById(topp).style; var domNew document.getElementByld(newTop).style;

应该是

var domTop = document.getElementById(topp).style; var domNew = document.getElementByld(newTop).style;

我正在堆栈任何3张图片。当我点击其中一个时，我点击的那个应该显示在顶部。

1 个答案: