gpt4 book ai didi

javascript - 将 div 定位在同一位置

转载 作者:行者123 更新时间:2023-12-02 18:52:01 24 4
gpt4 key购买 nike

我正在尝试使用 javascript 显示隐藏图像。代码工作正常,但图像显示在不同的位置。现在我想在同一位置显示和隐藏图像。

 <script type="text/javascript"> 
function showImage()
{

if(document.getElementById('check').checked==true)
{
document.getElementById("image").style.visibility = 'visible';
document.getElementById("images").style.visibility = 'hidden';
}
else if(document.getElementById('check').checked==false)
{
document.getElementById("image").style.visibility = 'hidden';
document.getElementById("images").style.visibility = 'visible';
}

}
</script>
<body onload="showImage()">
<font align="left">
<input type="checkbox" id="check" onclick="showImage()" />
Show Image

<div class="checkboxes" id = "image" >
<img class = "jive-image" height="125" src ="Tulips.jpg ">
</div>
<div id="images">
<img class = "jive-image" height="125" src="Desert.jpg">
</div>
</body>

怎么可能?

最佳答案

如果您使用display样式,您可以从页面中删除图像,而不仅仅是像visibility那样隐藏它。这意味着底部图像被推高,因为第一个图像不再占用空间。将 element.style.display 设置为 'block' 以显示元素,将 'none' 设置为隐藏元素。

jsFiddle

function showImage() {
if (document.getElementById('check').checked == true) {
document.getElementById("image").style.display = 'block';
document.getElementById("images").style.display = 'none';
} else if (document.getElementById('check').checked == false) {
document.getElementById("image").style.display = 'none';
document.getElementById("images").style.display = 'block';
}
}

关于javascript - 将 div 定位在同一位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15720128/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com