Finding if element is visible (JavaScript )

Asked 27/4, 2013 at 18:18 Answered 1/6, 2024 at 17:50

Solved javascript jquery dom visible getattribute

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.

Argueta answered 27/4, 2013 at 18:18 Comment(10)

display is a member of the style property, not an attribute. – Dickdicken 27/4, 2013 at 18:20

@MaxArt: I have tried using visible as well but that didn't work too. So if I cannot call display because its a CSS property and not a JavaScript Attribute how would I track that? – Argueta 27/4, 2013 at 18:21

How do you define "visible"? Does elements outside the viewport counts too? Do visibility: hidden counts too? – Uria 27/4, 2013 at 18:23

@DevonBernard How is $("#mydivID").is(":visible"); not working? – Senlac 27/4, 2013 at 18:24

@Senlac I have tried getting the elements display attribute - I guess it doesn't return the display value. – Reedy 27/4, 2013 at 18:27

@Ian: I am not sure why the visible method did not work... I have read around on the internet for a while before asking here and they people said that should work; but for some reason it didn't work in my case. Although I am able to use that call that in this instance $(this).is(':visible') ? divID : null; the method I used in my question did not work. – Argueta 27/4, 2013 at 18:32

@DJDavid98 Ahh yes, it was answering the wrong question. – Senlac 27/4, 2013 at 18:32

is(':visible') works just fine, so the problem lies elsewhere, and moving on to something else that basically does the exact same thing probably won't help much. – Sylphid 27/4, 2013 at 18:33

@DevonBernard So which are you trying to find? The style display value? Or whether the element is visible? There's a lot more to finding out if the element is actually visible than just looking at its style display property – Senlac 27/4, 2013 at 18:34

possible duplicate of Testing if something is hidden with jQuery – Upton 27/4, 2013 at 22:12

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

Reedy answered 27/4, 2013 at 18:23 Comment(0)

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>

Belvabelvedere answered 27/4, 2013 at 18:23 Comment(11)

@Derek朕會功夫: Because OP clearly stated in the question that this approach was attempted, and didn't work. – Drusi 27/4, 2013 at 18:28

@amnotiam - Although he said it didn't work, Palash's code looks totally valid too me. – Uria 27/4, 2013 at 18:29

@Derek朕會功夫: Yes, it looks valid, but didn't do what OP needed. The trouble is that we don't know exactly what that is. Could be that jQuery isn't defined. Could be something else. – Drusi 27/4, 2013 at 18:30

@amnotiam - Well, since this question is tagged with the jQuery tag, we assume that $ is defined. – Uria 27/4, 2013 at 18:33

Also, the OP is simply trying to find the style display property, not if the element is visible - "I have tried getting the elements display attribute value" – Senlac 27/4, 2013 at 18:33

@Senlac - Title: "Finding if element is visible" – Uria 27/4, 2013 at 18:34

@Derek朕會功夫: No, we can perhaps assume that OP intended to define jQuery, but that doesn't mean it's actually defined. My trouble with this answer is that the question states "Here's what I've tried" $("#mydivID").is(":visible"), and the answer is "Ok, then try this" $("#mydivID").is(":visible"), which doesn't add any helpful information. – Drusi 27/4, 2013 at 18:35

@Derek朕會功夫 Oh I understand that - the title and body don't exactly match. But their immediate concern seems to be finding the display property – Senlac 27/4, 2013 at 18:35

@Derek朕會功夫 Also, I don't see a point in posting an answer that duplicates exactly what the OP showed they tried without an explanation. Their question may not be logical, but it makes more sense explaining the answer and providing alternatives, or asking questions beforehand – Senlac 27/4, 2013 at 18:41

@Senlac - Hmm, I kind of agree with you. But at least he has edited his answer now. – Uria 27/4, 2013 at 18:43

@Derek朕會功夫 I still don't think adding "Include jQuery" helps. My point is that if someone wants to post an answer that has the same code as the OP (a confusing question), it should be explained. For example, I'd start off with "Well, you're trying to do 2 different things with .is(":visible") and .getAttribute(). You seem to want to know if it's visible, but you're also trying to only get its display style. If you want to see if it's visible, use .is(":visible") which returns a boolean. If you need the display property, use: (correct code for getting it)." and include references – Senlac 27/4, 2013 at 18:47

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

Reedy answered 27/4, 2013 at 18:23 Comment(0)

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

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

Greff answered 26/9, 2016 at 21:53 Comment(0)

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

Trucking answered 27/4, 2013 at 18:35 Comment(5)

To be honest, this is not really an answer to the question. – Reedy 27/4, 2013 at 18:38

I'm not sure what version of jQuery that is, and I don't care to look, but the latest version does more than just that -

return elem.offsetWidth <= 0 && elem.offsetHeight <= 0 || 			(!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");

– Senlac 27/4, 2013 at 18:38

well, it provides some insight into why what he was trying wasn't working and/or the right approach, and then provides insight into what should be done which is getting the 'display' property, which you already answered... so.... – Trucking 27/4, 2013 at 18:39

@Senlac that's bizarre, i'm referencing the master branch on github...? – Trucking 27/4, 2013 at 18:40

@NirvanaTikku I was looking at code.jquery.com/jquery-latest.js - Which for me, is showing 1.9.1. I wouldn't be surprised if my browser cached that version (instead of 2.0) because I've had it open for awhile, which still supports old IE (and has these extra things in). Interesting – Senlac 27/4, 2013 at 18:44

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.

Viscount answered 23/4, 2021 at 6:33 Comment(0)

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

Rectal answered 1/6, 2024 at 17:50 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags