0

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

怎么可能？

4

3 回答 3

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'; 
    }
};
于 2013-03-30T15:25:45.583 回答
1

如果您使用该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';
    }
}
于 2013-03-30T15:26:58.243 回答
0

而不是设置可见性，将显示设置为无或阻止。

于 2013-03-30T15:27:35.920 回答