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:yello         


        

Answer 1

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

This should work much better.

Good luck!

Answer 2

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

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

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

or..

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