試圖讓圖標隱藏在IE9與兼容性模式

Question

我試圖讓一個圖標看不見單擊時，我的HTML看起來像這樣：

<img id="imgTop" style="border-width:0px;" src="../Images/Common/button-print-icon.gif" onclick="clicked()"> 

和JavaScript看起來像這樣：

function clicked() 
{ 
    document.getElementById("imgTop").hidden=""; 
    ..... 
} 

這在Firefox和Chrome中運行良好，但在IE 9兼容模式下沒有。我嘗試了使用其他幾種方法（例如傳遞this和使用CSS樣式display），但似乎沒有任何工作，任何人都可以幫忙嗎？

Answer 1

你必須選擇visibility:hidden;或display:none;

顯示無 - Example

function clicked() { 
    document.getElementById("imgTop").style.display = "none"; 
} 

可見性隱藏 - Example

function clicked() { 
    document.getElementById("imgTop").style.visibility = "hidden"; 
} 

---

隱藏的可見性之間的差異，並顯示無：

能見度：隱藏隱藏元件，但它仍然佔據空間中 佈局。

display：none從文檔中完全刪除元素。它 不佔用任何空間，即使它的HTML仍然在 的源代碼。

Source

Answer 2

你會好起來的style.visibility屬性設置爲"hidden"，像這樣：

document.getElementById("imgTop").style.visibility = "hidden"; 

Here is a working example

你應該注意到雖然這設置visibility到"hidden"將隱藏元素，但仍保持在文檔流 - 這意味着它仍然佔用空間（除非它有絕對定位或浮動等）。如果是這種預期的效果，那麼你是好去，如果你想「崩潰」的元素，以便其他元素可以轉移到它的空間，那麼你可以做，而不是執行以下操作：

document.getElementById("imgTop").style.display = "none"; 

Here is another example