CODEWITHSUNDEEP
javascripthtmlcss
JohnDoe
JohnDoe

Reputation: 2513

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

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

Problem is that setting an outer display property using Javascript also sets inner display properties.

Given the following CSS:

.zapfenintermeddivisionrow {
    vertical-align:top;
    display:none;
}

.divisionColumn[data-division=true][data-boxed=true] {
    border: 1px solid black;
    display: inline-block;
    float: left;
}

HTML:

<tr class='zapfenintermeddivisionrow'>
<td class='zapfendividendintermed'>
<div class="divisionColumn" data-division="true" data-boxed="true">7<br />3<br /><br /><br /><br /><br /><br /></div>
<div class="divisionColumn" data-division="true" data-boxed="true">2<br />2<br />0<br /><br /><br /><br /><br /></div>
<div class="divisionColumn" data-division="true" data-boxed="true">5<br /><br />5<br />1<br /><br /><br /><br /></div>
<div class="divisionColumn" data-division="true" data-boxed="true">7<br /><br /><br />7<br />1<br /><br /><br /></div>
<div class="divisionColumn" data-division="true" data-boxed="true">6<br /><br /><br /><br />6<br />0<br /><br /></div>
<div class="divisionColumn" data-division="true" data-boxed="true">0<br /><br /><br /><br /><br />0<br />0<br /></div>

</td><td>:</td><td>4</td><td>=</td><td>181440</td>
</tr>

and Javascript:

function changeIntermediate() {
  var items = document.getElementsByClassName('zapfenintermeddivisionrow');
  for(i = 0; i < items.length; i++) {
    items[i].style.display = (getComputedStyle(items[i]).getPropertyValue('display') == 'none') ? 'inline' : 'none';
  }
}

document.getElementById('toggleallintermedsteps').addEventListener('click', changeIntermediate);

The Javascript changes the nested style of .divisionColumn (which has display: inline-box) to "inline". It seems the value is inherited to the child elements.

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

Upvotes: 0

Views: 1481

Answers (2)

JohnDoe
JohnDoe

Reputation: 2513

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.

Upvotes: 0

Quentin
Quentin

Reputation: 943823

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

Upvotes: 2

Related Questions