2

I wish to write a simple javascript function that toggles the visibility of a given element. Problem is, immediately after the page load, the initial style is unknown (at least to me). How can I determine what the current value of a given element's display style element is?

sirlark
  • 2,187
  • 2
  • 18
  • 28
  • Are you using any frameworks, jquery , MooTools, ExtJS, other, or plain javascript? – Nick Craver Mar 02 '10 at 14:29
  • I am not using any frameworks. I'm not averse to the idea generally, but in this specific case, using a framework means throwing out a whole pile of custom code that the frameworks would not replace (GIS, SVG widgets etc), i.e. not worth using a framework only for a single case, and not worth switching over to a framework because I'd have to reimplement too much to work with the underlying changes – sirlark Mar 02 '10 at 14:42

7 Answers7

7

From the jQuery/Sizzle source-code:

elem.offsetWidth > 0 || elem.offsetHeight > 0 // visible
elem.offsetWidth === 0 || elem.offsetHeight === 0  // hidden

where elem is a DOM element.

Now I'm not entirely sure why they say that an element is visible if either dimension is bigger than zero. I'd say that both dimensions should be bigger than zero for it to qualify as 'visible', but I trust they know better. (Maybe one null dimension and another non-zero dimension is not even possible within the browser).

Update: There's another discussion on the topic and an alternate solution (haven't tried it though): How do I check if an element is really visible with JavaScript?

Community
  • 1
  • 1
Dan
  • 9,912
  • 18
  • 49
  • 70
  • This is indeed the new method adopted in jQuery 1.3.2 and greater. As far as why either element may be non-zero, an element can have 0 width OR 0 height but still have a visible border, and still be technically "visible". – user229044 Mar 02 '10 at 14:47
  • offsetWidth/offsetHeight should take the borders into account. Here's a link from the Mozilla Dev Center: https://developer.mozilla.org/en/DOM/element.offsetWidth – Dan Mar 02 '10 at 14:53
  • why instead off CSS-display, u r testing offsetWidth n height ? – Rakesh Juyal Mar 02 '10 at 15:01
  • @Rakesh because this holds the computed width and height for the element, which is the clearest indicator for visibility -- or specifically the amount of space the element takes on the page. Also, style.display refers to the __inline styles__ (the one you define through the `style` html attribute on the element) – Dan Mar 02 '10 at 15:14
2

Pure Javascript way, this should work. 

function getStyle(elementId){
   alert(document.defaultView.getComputedStyle(document.getElementById(elementId), '').getPropertyValue("display"));
}
Gabe
  • 49,577
  • 28
  • 142
  • 181
1
function getDisplayStyle(elementId){   
 var display = document.getElementById(elementId).style.display;
 alert(display);
}
Gabe
  • 49,577
  • 28
  • 142
  • 181
  • 1
    I've tried that, but it does not take into account the stylesheet value, e.g. if document.getElementById(elemId).style.display is the empty string, the element may still be hidden by a stylesheet, or visible. – sirlark Mar 02 '10 at 14:37
  • In Firefox 3.6 and IE8, the value of `display` will be an empty string unless you explicitly style the element with a display property. – user229044 Mar 02 '10 at 14:37
0

Measuring offsets will work if you are only looking at the display property, but a test for visibility requires a look into the(browser-dependent) style cascade

document.deepCss=function(who, css){
 var val, dv= document.defaultView || window;
 val= who.style[css];
 if(!val){
  if(who.currentStyle) val= who.currentStyle[css];
  else val= dv.getComputedStyle(who,"").getPropertyValue(css);
 }
 return val || "";
}
function isVisible(who){
 return !!(document.deepCss(who,'visibility') != 'hidden' && 
 document.deepCss(who,'display') != 'none');
}
kennebec
  • 102,654
  • 32
  • 106
  • 127
-1

using jQuery, assuming your element has an id of myElement:

if($("#myElement").is(":visible")){
    // yep, it's visible - handle accordingly
}else{
    // nope, not visible
}
brettkelly
  • 27,655
  • 8
  • 56
  • 72
  • Question made no mention of jQuery – user229044 Mar 02 '10 at 14:28
  • Yes, but it made mention of JavaScript which is what jQuery is written in. Didn't realize I was confined to the tags used by OP when answering. – brettkelly Mar 02 '10 at 14:30
  • 1
    Assuming jQuery is not an option, how does jQuery do it? using jQery just for this seem like overkill – sirlark Mar 02 '10 at 14:30
  • 1
    @sirlark - For **just** this, it is overkill, however if you're doing a lot with javascript, it'll save you a great deal of code and time overall. – Nick Craver Mar 02 '10 at 14:31
  • @inkedmn Don't mean to flame, but yes, you generally should confine you answer to things the question mentions in it's body or tags. If a question was tagged "C++", would you accept and answer written Boost or QT, both of which are written in C++? – user229044 Mar 02 '10 at 14:34
  • @Nick Craver - agreed, but see response to your above comment – sirlark Mar 02 '10 at 14:50
  • @inkedmn @meagar - to be fair, I should have specified I'm not using a framework. It's a reasonable assumption these days that noone actually writes in pure JS ;) – sirlark Mar 02 '10 at 14:51
-1

No no, jquery is not needed.

IF that's display: none you are after. Else do the same thing with visibility: hidden. 

 if(mynode.style.display != "none")
    { ..  }
    else
poo
  • 1,095
  • 4
  • 13
  • 21
-3
$(document).ready( function () {
 if $('#id').hasClass('hidden') 
   $('#id').toggelClass('hidden');
);

hidden is CSS class to hide element

t34
  • 11
  • 4
  • I think you have to add JQuery to your project and forget about any future problems... it is simple and easy solution you able to find. – t34 Mar 02 '10 at 14:48
  • and also i use ready event (when DOM model is created) so it helps you to prevent error of getting dom element before its created by browser – t34 Mar 02 '10 at 14:50
  • You should use the features built in to jQuery rather than add a "hidden" class; this accomplishes the same thing: `$('#id').toggle();` – user229044 Mar 02 '10 at 14:51
  • toggle using inline style, but i want to use my css hidden... that allows to me change html from this
    to this
    – t34 Mar 02 '10 at 15:00