使用Javascript设置样式时，禁止“显示”的样式继承 [英] Prevent style inheritance of 'display' when setting style using Javascript

问题描述

我想使用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 =divisionColumndata-division =truedata-boxed =true> 7< br /> 3< br />< br /> >< br />< br />< br />< / div> 
< div class =divisionColumndata-division =truedata-boxed =true> 2< br /> 2< br /> >< br />< br />< br />< / div> 
< div class =divisionColumndata-division =truedata-boxed =true> 5< br />< br /> >< br />< br />< br />< / div> 
< div class =divisionColumndata-division =truedata-boxed =true> 7< br />< br /> > 1< br />< br />< br />< / div> 
< div class =divisionColumndata-division =truedata-boxed =true> 6< br />< br />< br /> > 6< br /> 0< br />< br />< / div> 
< div class =divisionColumndata-division =truedata-boxed =true> 0< 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'）== '没有'） ？ 'inline'：'无'; 
 
 
 $ b document.getElementById（'toggleallintermedsteps'）。addEventListener（'click'，changeIntermediate）; 
  

Javascript将.divisionColumn（显示内联框）的嵌套样式更改为inline 。它似乎是继承了子元素的值。

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

解决方案

为什么设置display一个外部类传播到内部类，当它排除了CSS？

不是。

从规范：

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

请注意，显示'none'不会创建隐形框;它根本不创建任何盒子。 CSS包含一些机制，使元素能够在格式化结构中生成影响格式化的框，但本身不可见。

---

其中一个：

• 不使用 display：none （如规范所述， visibility 可能是更好的选择） li>

• 通过移动您希望显示的元素，使它们不是您希望隐藏的元素的后代


• 更改隐藏的元素（例如，选择

这些元素既是您当前隐藏的元素的后代，也是您要显示的元素的兄弟元素

I would like to toggle the visibility of a larger portion of HTML using Javascript, which also contains display: <value> properties.

Problem is that setting an outer display property using Javascript also sets inner display properties.

Given the following 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>

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

The Javascript changes the nested style of .divisionColumn (which has display: inline-box) to "inline". It seems the value is inherited to the child elements.

Why is setting the value of display of an outer class propagated to the inner class, when it's ruled out by CSS? How do I prevent this?

解决方案

Why is setting the value of display of an outer class propagated to the inner class, when it's ruled out by CSS?

It isn't.

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?

One of:

• not using display: none (as the spec says, visibility might be a better choice)
• by moving the elements you wish to display so they are not descendants of the elements you wish to hide
• changing the elements you hide (e.g. to a select number of elements that are both descendants of the element you are currently hiding and siblings of the elements you want to display).

这篇关于使用Javascript设置样式时，禁止“显示”的样式继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！