Chciałbym przełączać widoczność większej części HTML za pomocą Javascript, który również zawieradisplay: <value> nieruchomości.

Problem polega na tym, że ustawienie zewnętrznej właściwości wyświetlania za pomocą Javascript ustawia również właściwości wyświetlania wewnętrznego.

Biorąc pod uwagę następujący CSS:

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

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

HTML:

<code><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>
</code>

i Javascript:

<code>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);
</code>

Javascript zmienia zagnieżdżony styl .divisionColumn (który wyświetla: pole wbudowane) na „inline”. Wydaje się, że wartość jest dziedziczona do elementów potomnych.

Dlaczego ustawianie wartości wyświetlania klasy zewnętrznej jest propagowane do klasy wewnętrznej, gdy jest to wykluczone przez CSS? Jak temu zapobiec?