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

Question

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?

Answer 1

For this particular purpose, $("span").show() should be good enough.

Answer 2

$('#lol').get(0).style.display=''

or..

$('#lol').css('display', '')

Answer 3

The removeAttr() function only removes HTML attributes. The display is not a HTML attribute, it's a CSS property. You'd like to use css() function instead to manage CSS properties.

But jQuery offers a show() function which does exactly what you want in a concise call:

$("span").show();

Answer 4

You should remove "style" attribute instead of "display" property :

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

Answer 5

If you are planning to hide show some span based on click event which is initially hidden with style="display:none" then .toggle() is best option to go with.

$("span").toggle();

Reasons : Each time you don't need to check whether the style is already there or not. .toggle() will take care of that automatically and hide/show span based on current state.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Toggle" onclick="$('#hiddenSpan').toggle();"/>
<br/>
<br/>
<span id="hiddenSpan" style="display:none">Just toggle me</span>

Answer 6

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");

Answer 7

The jQuery you're using is manipulates the DOM, not the CSS itself. Try changing the word span in your CSS to .mySpan, then apply that class to one or more DOM elements in your HTML like so:

...
<span class="mySpan">...</span>
...

Then, change your jQuery as follows:

$(".mySpan").css({ display : "inline" }); // Note quotes

This should work much better.

Good luck!

Answer 8

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