0

我想使用还包含属性的 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排除时？我该如何防止这种情况？

4

2 回答 2

2

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

它不是。

从规范：

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

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

我该如何防止这种情况？

之一：

  • 不使用display: none（如规范所说，visibility可能是更好的选择）
  • 通过移动要显示的元素，使它们不是要隐藏的元素的后代
  • 更改您隐藏的元素（例如，选择数量的元素，这些元素既是您当前隐藏的元素的后代，又是您要显示的元素的兄弟姐妹）。
于 2012-04-06T10:29:54.147 回答
0

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

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

正如@powerbuoy 正确指出的那样，样式属性不会自动传播给孩子。在元素是 TR 的情况下，FF 的行为很奇怪，例如。块被分配。

于 2012-04-06T16:22:06.817 回答