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?
views:
86answers:
7
A:
using jQuery, assuming your element has an id of myElement:
if($("#myElement").is(":visible")){
// yep, it's visible - handle accordingly
}else{
// nope, not visible
}
inkedmn
2010-03-02 14:28:33
Question made no mention of jQuery
meagar
2010-03-02 14:28:58
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.
inkedmn
2010-03-02 14:30:05
Assuming jQuery is not an option, how does jQuery do it? using jQery just for this seem like overkill
2010-03-02 14:30:29
@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
2010-03-02 14:31:26
@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++?
meagar
2010-03-02 14:34:52
@Nick Craver - agreed, but see response to your above comment
2010-03-02 14:50:11
@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 ;)
2010-03-02 14:51:09
except masochists like me
2010-03-02 14:51:51
+1
A:
function getDisplayStyle(elementId){
var display = document.getElementById(elementId).style.display;
alert(display);
}
gmcalab
2010-03-02 14:29:13
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.
2010-03-02 14:37:35
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.
meagar
2010-03-02 14:37:55
A:
$(document).ready( function () {
if $('#id').hasClass('hidden')
$('#id').toggelClass('hidden');
);
hidden is CSS class to hide element
t34
2010-03-02 14:33:41
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
2010-03-02 14:48:40
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
2010-03-02 14:50:04
You should use the features built in to jQuery rather than add a "hidden" class; this accomplishes the same thing: `$('#id').toggle();`
meagar
2010-03-02 14:51:00
toggle using inline style, but i want to use my css hidden... that allows to me change html from this<div class="gray"> to this <div class="gray hidden"> and back....
t34
2010-03-02 15:00:45
+2
A:
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): http://stackoverflow.com/questions/704758/how-to-check-if-an-element-is-really-visible-with-javascript
Dan
2010-03-02 14:42:57
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".
meagar
2010-03-02 14:47:18
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
2010-03-02 14:53:15
@Dan, why instead off CSS-display, u r testing offsetWidth n height ?
Rakesh Juyal
2010-03-02 15:01:49
@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
2010-03-02 15:14:44
A:
Pure Javascript way, this should work.
function getStyle(elementId){
alert(document.defaultView.getComputedStyle(document.getElementById(elementId), '').getPropertyValue("display"));
}
gmcalab
2010-03-02 14:56:21
A:
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
2010-03-02 15:07:22
A:
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
2010-03-02 17:28:15