By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,384 Members | 1,847 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,384 IT Pros & Developers. It's quick & easy.

display none/block for nested elements

P: n/a
Hi group,

I have a rather big page with many (databasedependent) pieces of HTML.

My question boils down to the following problem (simplified):

Considering the folowwing piece of HTML:

<div id="div1" style="display:none">
<div id="div2" style="display:block">
sometextsometextsometext
</div>
</div>

document.getElementById("div2").style.display will return 'block'.

But of course, sometextsometextsometext will not be displayed because the
outer div is not visible.
All OK so far.

Question: If I have a reference to div2, and NO knowledge of parent
elements, can I find out if it is visible?

TIA

Regards,
Erwin Moller
Aug 30 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Erwin Moller said the following on 8/30/2006 10:07 AM:
Hi group,

I have a rather big page with many (databasedependent) pieces of HTML.

My question boils down to the following problem (simplified):

Considering the folowwing piece of HTML:

<div id="div1" style="display:none">
<div id="div2" style="display:block">
sometextsometextsometext
</div>
</div>

document.getElementById("div2").style.display will return 'block'.

But of course, sometextsometextsometext will not be displayed because the
outer div is not visible.
All OK so far.

Question: If I have a reference to div2, and NO knowledge of parent
elements, can I find out if it is visible?
Yes, but you do it by determining if it is hidden or not. You check it's
parentNode, until the parentNodes have no parentNodes (while loop), to
see if any have a CSS property of display:none or visibility: hidden. If
any parentNode is visiblity:hidden or display:none then it won't be
visible. Otherwise you can make an educated guess that it is visible.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Aug 30 '06 #2

P: n/a
Randy Webb wrote:
>Question: If I have a reference to div2, and NO knowledge of parent
elements, can I find out if it is visible?
Yes, but you do it by determining if it is hidden or not. You check
it's parentNode, until the parentNodes have no parentNodes (while
loop), to see if any have a CSS property of display:none or
visibility: hidden.
That won't be accurate, since CSS rules can be written which wouldn't depend
only on the parentNode chain.

Instead, use currentStyle or getComputedStyle approaches to check on the
element's state given all applied css rules.
Using the CSS.getStyle() method in the util lib at
http://www.javascripttoolbox.com/lib/util/

will do all the work for you.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Aug 30 '06 #3

P: n/a
Matt Kruse wrote:
Randy Webb wrote:
>>Question: If I have a reference to div2, and NO knowledge of parent
elements, can I find out if it is visible?
Yes, but you do it by determining if it is hidden or not. You check
it's parentNode, until the parentNodes have no parentNodes (while
loop), to see if any have a CSS property of display:none or
visibility: hidden.

That won't be accurate, since CSS rules can be written which wouldn't
depend only on the parentNode chain.

Instead, use currentStyle or getComputedStyle approaches to check on the
element's state given all applied css rules.
Using the CSS.getStyle() method in the util lib at
http://www.javascripttoolbox.com/lib/util/

will do all the work for you.
Thanks Matt and Randy.

I know how to proceed now.
Since I completely build the page, and know what elements and structure to
expect, I will try Matts approach (parent-chain).

Thanks!

Regards,
Erwin Moller
Aug 31 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.