Blank Span Element Not Visible

Issue

I have following span element in my html

<span style="float: right;color: red; display: inline-block;" id="antcl_error"></span>

But When i checked its visibility then it says not Visible

$(document.body).find("#antcl_error").is(":visible");

Above code return false if Span is blank

Solution

Since the span is floated and has no content and no width and height, it does not consume space in the document, hence it is considered invisible:

You can check for the visibility value of CSS:

if($("#antcl_error").css('visibility') != "hidden") {
   // visible
}

As per documentation:

Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.

Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout.

Answered By - KAD