Trying to make icon hidden in IE9 with compatability mode

I am trying to make an icon invisible when it is clicked, my HTML looks like this:

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

and the Javascript looks like this:

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

This works fine in Firefox and Chrome, but in IE 9 with compatibility mode it doesn't. I tried using several other methods (Such as passing this and using CSS style display), but nothing seems to work, can anyone help?

Answers


You have to options visibility:hidden; or display:none;

Display None - Example

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

Visibility Hidden - Example

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

The difference between visibility hidden and display none:

visibility: hidden hides the element, but it still takes up space in the layout.

display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.

Source


You would be better off setting the style.visibility property to "hidden", like so:

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

Here is a working example

You should note though that settings visibility to "hidden" will hide the element but still keep it in the document flow - which means it will still take up space (unless it has absolute positioning or floated etc.). If this is the desired effect then you are good to go, if you want to "collapse" the element so other elements can shift into it's space then you can do the following instead:

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

Here is another example


Need Your Help

How to pass data from URL to JQuery toggler initShow function

javascript jquery jquery-ui-accordion

A webpage has several collapsed divs and I want to append data to URL when linking to that page, so the URL will tell this script which particular div to expand when the page is loaded.

Autofac with multiple implementations of the same interface

c# dependency-injection inversion-of-control autofac

I'm using Autofac and would like to have multiple implementations of an interface. How can I configure Autofac so to resolve dependencies based on the current type?