将div放在同一位置

Question

我正在尝试使用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>

怎么可能？

Answer 1

这是因为您正在使用visibility 。 CSS的visibility样式不会影响页面流。 就像您将opacity设置为0一样。您可能需要使用display 。

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

Answer 2

如果使用display样式，则可以从页面中删除图像，而不仅仅是像visibility一样将其隐藏。 这意味着底部图像被推高，因为第一个图像不再占用空间。 将element.style.display设置为'block'以显示元素，将其设置为'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';
    }
}

Answer 3

代替设置可见性，将显示设置为无或阻止。