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.

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;

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

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>

Gaurav

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

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

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

来源：https://stackoverflow.com/questions/16255423/finding-if-element-is-visible-javascript

标签

javascript

jquery

dom

visible

getattribute