Impedir herança de estilo de 'display' ao definir estilo usando Javascript
Gostaria de alternar a visibilidade de uma parte maior do HTML usando JavaScript, que também contémdisplay: <value>
propriedades.
O problema é que definir uma propriedade de exibição externa usando Javascript também define propriedades de exibição internas.
Dado o seguinte CSS:
<code>.zapfenintermeddivisionrow { vertical-align:top; display:none; } .divisionColumn[data-division=true][data-boxed=true] { border: 1px solid black; display: inline-block; float: left; } </code>
HTML:
<code><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> </code>
e Javascript:
<code>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); </code>
O Javascript altera o estilo aninhado de .divisionColumn (que exibe: inline-box) para "inline". Parece que o valor é herdado para os elementos filhos.
Por que a definição do valor da exibição de uma classe externa é propagada para a classe interna quando ela é excluída por CSS? Como evito isso?