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'以显示元素，将'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

而是设置可见性，将显示设置为none或block。

在相同的位置上显示div

3 个答案: