remove attribute display:none; so the item will be visible

user_423980 0
Viewed 149478

The element is:

span    {
    position:absolute;
    float:left;
    height:80px;
    width:150px;
    top:210px;
    left:320px;

    background-color:yellow;

    display:none;                 //No display                  
    border: 3px solid #111;
}

I use this code to remove the display so it can be visible,

$("span").removeAttr("display");

but it does not work. Is the method I'm using valid or is there an other way to get the result?

attributes css jquery
8 Answers

Generally it is better to have an id or a CSS class identifier for the target DOM element. So you don't modify other unwanted elements.

While $("span") looks small, it actually goes after every element in the page and runs the jQuery action that follows. Not only it is not efficient, it also has potentials for future bugs if other s are added to page.

so the best way is to first uniquely mark the target element inside the page. e.g.

<span id="uniqueId">

then using plain JS you can pinpoint it and remove and modify its properties. in this case

   document.querySelector("#uniqueId").style.removeProperty("display");
user_109735140

I was just trying something similar but with animation. I also learned that this problem can be solved by fadeIn() adding that additional animation factor to make the transition look smoother.

$("span").fadeIn()
user_32114560
Related