Prevenga la herencia de estilo de 'mostrar' al configurar el estilo usando Javascript
Me gustaría cambiar la visibilidad de una porción más grande de HTML usando Javascript, que también contienedisplay: <value>
propiedades
El problema es que configurar una propiedad de visualización externa usando Javascript también establece las propiedades de visualización interna.
Dado el siguiente 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>
y 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);
El Javascript cambia el estilo anidado de .divisionColumn (que tiene display: inline-box) a "inline". Parece que el valor se hereda a los elementos hijos.
¿Por qué la configuración del valor de visualización de una clase externa se propaga a la clase interna cuando está descartada por CSS? ¿Cómo puedo prevenir esto?