使用 Javascript 設置樣式時防止“顯示”樣式 inheritance

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”。 似乎該值繼承給了子元素。

為什么設置外部 class 的顯示值傳播到內部 class，當它被 CSS 排除時？ 我該如何防止這種情況？

Answer 1

為什么設置外部 class 的顯示值傳播到內部 class，當它被 CSS 排除時？

它不是。

從規格：

該值導致元素不出現在格式結構中（即，在視覺媒體中，元素不生成框並且對布局沒有影響）。 后代元素也不生成任何框； 元素及其內容完全從格式結構中刪除。 不能通過在后代上設置“顯示”屬性來覆蓋此行為。

請注意，顯示“無”不會創建不可見框； 它根本不創建框。 CSS 包括使元素能夠在格式結構中生成影響格式但本身不可見的框的機制。 有關詳細信息，請參閱可見性部分。

---

我該如何防止這種情況？

之一：

• 不使用display: none （正如規范所說， visibility可能是更好的選擇）
• 通過移動您希望顯示的元素，使它們不是您希望隱藏的元素的后代
• 更改您隱藏的元素（例如，更改為 select 個元素，這些元素既是您當前隱藏的元素的后代，又是您要顯示的元素的兄弟姐妹）。

Answer 2

我應該補充說，我正在使用 FF11。 也許我發現了一個錯誤、缺點或“遺留問題”，但訣竅如下：

1. class '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 的行為很奇怪，例如。 塊被分配。