display none/block for nested elements

[Erwin Moller]

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

 

[Randy Webb]

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.

 

[Matt Kruse]

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.

 

[Erwin Moller]

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