display none/block for nested elements

E

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
 
R

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.
 
M

Matt Kruse

Randy said:
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.
 
E

Erwin Moller

Matt said:
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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top