javascript - 使用 Javascript 设置样式时防止样式继承 'display'

Question

我想使用 Javascript 切换大部分 HTML 的可见性，其中还包含 display: <value>属性。

问题是使用 Javascript 设置外部显示属性也会设置内部显示属性。

给定以下 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>

和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);

Javascript 将 .divisionColumn(具有 display: inline-box)的嵌套样式更改为“inline”。似乎该值继承给了子元素。

当 CSS 排除时，为什么设置外部类的显示值会传播到内部类？ 我该如何防止这种情况？

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?

不是。

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?

其中之一:

• 不使用 display: none(如规范所述，visibility 可能是更好的选择)
• 通过移动您希望显示的元素，使它们不是您希望隐藏的元素的后代
• 更改您隐藏的元素(例如，更改为既是您当前隐藏的元素的后代又是您要显示的元素的兄弟元素的选定数量的元素)。