Question

所以，我正在为我的高中网页设计课做作业，而我在修改图片的z-index方面遇到了麻烦。应该有两个图像在彼此的顶部。单击页面上的按钮时，底部的图像将显示在顶部（或顶部图像将显示在底部）。这是我正在使用的代码：

javascript

<script type="text/javascript">
function Switch()
{
document.getElementById("mononoke2").style.zIndex = "-1";
}

这是HTML

<div id="mononoke2">
<img src="mononoke2.png" alt="ashandsan">
</div>
<div id="mononoke3">
<img src="mononoke3.jpg" alt="sanandmoro" width="1234" height="694">
</div>
<button type="button" onclick="Switch()">Flippity Flip</button>

和CSS

#mononoke2 {
margin-left: 0px auto;
margin-right: 0px auto;
display: block;
position: absolute;
z-index: 100;
}
#mononoke3 {
margin-left: 0px auto;
margin-right: 0px auto;
display: block;
position: relative;
left: 50px;
z-index: 20;
}

Answer 1

使用jQuery。

$("#id").css("zindex","-1");

Answer 2

将您的JS功能更改为：

function Switch() {
    var element = document.getElementById("mononoke2");
    var style = window.getComputedStyle(element);
    var index = style.getPropertyValue("z-index"); 



     if(index > 0)
     {
     document.getElementById("mononoke2").style.zIndex = "-30";
     }
     else
     {
    document.getElementById("mononoke2").style.zIndex = "100";
     }
}

需要帮助改变图像的z-index

2 个答案: