相同位置上的Spot div

我正在嘗試使用javascript顯示隱藏圖像。代碼工作正常，但圖像顯示在不同的位置。現在我想在同一個地方顯示和隱藏圖像。相同位置上的Spot div

<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>

這怎麼可能？

來源

2013-03-30 Aneesh

如果使用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-30 15:26:58

這是因爲您使用的是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-30 15:25:45 jeremy

而不是設置的可見性，顯示設置到無或塊。

來源

2013-03-30 15:27:35 SomeSillyName

相同位置上的Spot div

回答

相關問題