Запретить наследование стилей отображения при настройке стиля с помощью Javascript

Я хотел бы переключить видимость большей части HTML, используя Javascript, который также содержитdisplay: <value> свойства.

Проблема заключается в том, что установка внешнего свойства отображения с помощью Javascript также устанавливает внутренние свойства отображения.

Учитывая следующий 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>

и 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 изменяет вложенный стиль .divisionColumn (который имеет display: inline-box) на «inline». Кажется, значение наследуется дочерним элементам.

Почему установка значения отображения внешнего класса распространяется на внутренний класс, если это исключено CSS? Как мне предотвратить это?

Ответы на вопрос(2)

Ваш ответ на вопрос