Prevent style inheritance of 'display' when setting style using Javascript

Question

I would like to toggle the visibility of a larger portion of HTML using Javascript, which also contains display: properties.

Problem is th

Answer 1

Why is setting the value of display of an outer class propagated to the inner class, when it's ruled out by CSS?

It isn't.

From the specification:

This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the 'display' property on the descendants.

Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.

---

How do I prevent this?

One of:

• not using display: none (as the spec says, visibility might be a better choice)
• by moving the elements you wish to display so they are not descendants of the elements you wish to hide
• changing the elements you hide (e.g. to a select number of elements that are both descendants of the element you are currently hiding and siblings of the elements you want to display).

Answer 2

I should have added, that I am using FF11. Maybe I discovered a bug, shortcoming or 'legacy', but the trick is the following:

1. The class 'zapfenintermeddivisionrow' (initially containing display:none) is assigned to a TR, a table row.
2. There is the display:table-row property http://www.w3schools.com/cssref/pr_class_display.asp, never heard of that before.
3. By toggling items[i].style.display between 'none' and 'table-row' it's now doing what I thought it should do.

As correctly stated by @powerbuoy, the style attribute is NOT automatically propagated to childs. In the case where the element is a TR, FF behaves oddly though, if eg. block is assigned.