CODEWITHSUNDEEP
javascriptjquerydomvisiblegetattribute
Devon Bernard
Devon Bernard

Reputation: 2300

Finding if element is visible (JavaScript )

I have a javascript function that tries to determine whether a div is visible and does various processes with that variable. I am successfully able to swap an elements visibility by changing it's display between none and block; but I cannot store this value...

I have tried getting the elements display attribute value and finding if the the element ID is visible but neither has worked. When I try .getAttribute it always returns null; I am not sure why because I know that id is defined and it has a display attribute.

Here is the code of the two different methods I have tried:

var myvar = $("#mydivID").is(":visible");
var myvar = document.getElementById("mydivID").getAttribute("display");

Any guidance or assistance would be greatly appreciated.

Upvotes: 14

Views: 81271

Answers (6)

Sakthikanth
Sakthikanth

Reputation: 139

A JavaScript in built function is available to check for element visibility.

document.querySelector('#elementId').checkVisibility()

Since this method has been released in recently, please make sure your browser compatability

Upvotes: 0

Amit Singh
Amit Singh

Reputation: 299

var myvar = $("#mydivID").is(":visible"); //THis is JQUERY will return true if visible

var myvar = document.getElementById("mydivID").getAttribute("display"); //HERE Display is not a attribute so this will not give desired result.

MY SOLUTION

1.Select the element using QuerySelector
var myvar= document.querySelector('ELEMENT');

2.Check the OffsetWidth and Offsetheight to be greater than 0;
(myvar.offsetWidth > 0 || myvar.offsetHeight > 0)

3.if myvar is Greater than 0 then it's visble else not.

Upvotes: 1

SeinopSys
SeinopSys

Reputation: 8937

Display is not an attribute, it's a CSS property inside the style attribute.

You may be looking for

var myvar = document.getElementById("mydivID").style.display;

or

var myvar = $("#mydivID").css('display');

Upvotes: 12

Gaurav
Gaurav

Reputation: 859

If you would like to do this only javascript way you may try 

window.getComputedStyle(document.getElementById("mydivID"),null).getPropertyValue('display')

Upvotes: 12

palaѕн
palaѕн

Reputation: 73946

Try like this:

$(function () {
    // Handler for .ready() called.
    if ($("#mydivID").is(":visible")) {
        alert('Element is visible');
    }
});

FIDDLE

Please make sure to include the jQuery file inside the head tag, as follows

<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

Upvotes: 22

Nirvana Tikku
Nirvana Tikku

Reputation: 4205

Let's take a second to see what .is(":visible") is doing in jQuery, shall we?

Here's a link: https://github.com/jquery/jquery/blob/master/src/css.js#L529

return !jQuery.expr.filters.hidden( elem );

where

jQuery.expr.filters.hidden = function( elem ) {
    // Support: Opera <= 12.12
    // Opera reports offsetWidths and offsetHeights less than zero on some elements
    return elem.offsetWidth <= 0 && elem.offsetHeight <= 0;
};

So, it's just checking the offset width and height of the element.

That said, and also worth noting, when jQuery checks to see if an element is hidden (i.e. like when triggering a 'toggle' event), it performs a check on the display property and its existence in the dom. https://github.com/jquery/jquery/blob/master/src/css.js#L43

Upvotes: 8

Related Questions