Reputation: 2300
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
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
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
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
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
Reputation: 73946
Try like this:
$(function () {
// Handler for .ready() called.
if ($("#mydivID").is(":visible")) {
alert('Element is visible');
}
});
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
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