尝试使用兼容模式在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";
}

---

隐藏的可见性与显示无之间的差异：

  

可见性：隐藏隐藏元素，但仍占用空间   布局。

     

显示：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