Предотвращение наследования стиля «отображения» при настройке стиля с использованием Javascript

Question

Я хотел бы переключить видимость большей части 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 (который имеет дисплей: встроенный -box) на «inline». Кажется, что значение унаследовано дочерними элементами.

Зачем устанавливать значение отображения внешнего класса, распространяемого во внутренний класс, когда оно исключается из CSS? Как это предотвратить?

Answer 1

Зачем устанавливать значение отображения внешнего класса, распространяемого во внутренний класс, когда оно исключается из CSS?

Это не так.

From the specification:

Это значение вызывает элемент не отображается в структуре форматирования (т.е. в визуальных средах элемент не генерирует коробки и не оказывает никакого влияния на макете). Элементы потомка также не генерируют никаких полей; элемент и его содержимое полностью удаляются из структуры форматирования. Это поведение нельзя переопределить, установив свойство «display» на потомках.

Обратите внимание: отображение «none» не создает невидимое поле; он не создает никакой коробки. CSS включает механизмы, которые позволяют элементу генерировать поля в структуре форматирования, которые влияют на форматирование, но не видны сами. Подробнее см. В разделе о видимости.

---

Как это предотвратить?

Один из:

• не используя display: none (как говорит спецификации, visibility может быть лучшим выбором)
• , перемещая элементы, которые вы хотите отобразить, поэтому они не являются потомками элементов вы хотите скрыть
• изменение элементов, которые вы скрываете (например, для выбора количества элементов, которые являются потомками элемента, который вы сейчас скрываете, и братьев и сестер элементов, которые вы хотите отобразить).

Answer 2

Я должен был добавить, что я использую FF11.Может быть, я обнаружил ошибку, недостаток или «наследство», но хитрость заключается в следующем:

1. Класс «zapfenintermeddivisionrow» (первоначально не содержащий дисплей: нет) назначается TR, строки таблицы.
2. Существует дисплей: свойство таблицы строк http://www.w3schools.com/cssref/pr_class_display.asp, никогда не слышал об этом раньше.
3. Переключая элементы [i] .style.display между 'none' и 'table-row', теперь он делает то, что я думал, что он должен делать.

Как правильно указано @powerbuoy, атрибут стиля НЕ автоматически распространяется на детей. В случае, когда элемент является TR, FF ведет себя странно, если, например,. блок назначается.