13

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.

Devon Bernard
  • 2,250
  • 5
  • 19
  • 32
  • 4
    `display` is a member of the `style` property, not an attribute. – MaxArt Apr 27 '13 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? – Devon Bernard Apr 27 '13 at 18:21
  • How do you define "visible"? Does elements outside the viewport counts too? Do `visibility: hidden` counts too? – Derek 朕會功夫 Apr 27 '13 at 18:23
  • 6
    @DevonBernard How is `$("#mydivID").is(":visible");` not working? – Ian Apr 27 '13 at 18:24
  • @Ian `I have tried getting the elements display attribute` - I guess it doesn't return the display value. – SeinopSys Apr 27 '13 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. – Devon Bernard Apr 27 '13 at 18:32
  • @DJDavid98 Ahh yes, it was answering the wrong question. – Ian Apr 27 '13 at 18:32
  • 1
    `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. – adeneo Apr 27 '13 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 – Ian Apr 27 '13 at 18:34
  • possible duplicate of [Testing if something is hidden with jQuery](http://stackoverflow.com/questions/178325/testing-if-something-is-hidden-with-jquery) – Paulo Scardine Apr 27 '13 at 22:12

5 Answers5

22

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>
palaѕн
  • 72,112
  • 17
  • 116
  • 136
  • 1
    @Derek朕會功夫: Because OP clearly stated in the question that this approach was attempted, and didn't work. –  Apr 27 '13 at 18:28
  • 3
    @amnotiam - Although he said it didn't work, Palash's code looks totally valid too me. – Derek 朕會功夫 Apr 27 '13 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. –  Apr 27 '13 at 18:30
  • @amnotiam - Well, since this question is tagged with the jQuery tag, we assume that `$` is defined. – Derek 朕會功夫 Apr 27 '13 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" – Ian Apr 27 '13 at 18:33
  • @Ian - Title: "Finding if element is visible" – Derek 朕會功夫 Apr 27 '13 at 18:34
  • 2
    @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. –  Apr 27 '13 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 – Ian Apr 27 '13 at 18:35
  • 1
    @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 – Ian Apr 27 '13 at 18:41
  • @Ian - Hmm, I kind of agree with you. But at least he has edited his answer now. – Derek 朕會功夫 Apr 27 '13 at 18:43
  • 1
    @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 – Ian Apr 27 '13 at 18:47
12

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

window.getComputedStyle(document.getElementById("mydivID"),null).getPropertyValue('display')
Petter Friberg
  • 21,252
  • 9
  • 60
  • 109
Gaurav
  • 821
  • 9
  • 11
11

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');
SeinopSys
  • 8,787
  • 10
  • 62
  • 110
8

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

Nirvana Tikku
  • 4,105
  • 1
  • 20
  • 28
  • 1
    To be honest, this is not *really* an answer to the question. – SeinopSys Apr 27 '13 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");` – Ian Apr 27 '13 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.... – Nirvana Tikku Apr 27 '13 at 18:39
  • 1
    @Ian that's bizarre, i'm referencing the master branch on github...? – Nirvana Tikku Apr 27 '13 at 18:40
  • @NirvanaTikku I was looking at http://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 – Ian Apr 27 '13 at 18:44
1

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.
Amit Singh
  • 279
  • 2
  • 7