Question

我想使用Javascript切换大部分HTML的可见性，Javascript也包含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（显示：inline-box）的嵌套样式更改为“inline”。似乎值继承到子元素。

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

Answer 1

为什么设置外部类的显示值传播到内部类，当它被CSS排除时？

不是。

From the specification：

此值导致元素不出现在格式化结构中（即，在可视媒体中元素不生成框并且对布局没有影响）。后代元素也不会生成任何框;元素及其内容完全从格式化结构中删除。通过在后代上设置'display'属性，无法覆盖此行为。

请注意，'none'的显示不会创建一个隐形框;它根本不会创造任何盒子。 CSS包括一些机制，使元素能够在格式化结构中生成影响格式但本身不可见的框。有关详细信息，请参阅可见性部分。

如何防止这种情况？

其中一个：

未使用display: none（正如规范所说，visibility可能是更好的选择）
通过移动您想要显示的元素，使它们不是您要隐藏的元素的后代
更改您隐藏的元素（例如，选择数量的元素，这些元素既是您当前隐藏的元素的后代，也是您要显示的元素的兄弟元素。）

Answer 2

我应该补充说，我正在使用FF11。也许我发现了一个错误，缺点或“遗留”，但诀窍如下：

类'zapfenintermeddivisionrow'（最初包含display：none）被分配给TR，即表格行。
有display：table-row属性http://www.w3schools.com/cssref/pr_class_display.asp，之前从未听说过。
通过在'none'和'table-row'之间切换items [i] .style.display，它现在正在做我认为应该做的事情。

正如@powerbuoy所说，style属性不会自动传播给childs。在元素是TR的情况下，FF表现得很奇怪，例如。块已分配。

使用Javascript设置样式时，防止'display'的样式继承

2 个答案: