Javascriptを使用してスタイルを設定するときに、 'display'のスタイル継承を防止します。

Question

Javaの大部分の可視性を切り替えるには、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）を「インライン」に設定します。値は子要素に継承されているようです。

外部クラスの表示値を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で正しく記述されているように、style属性は自動的に子に伝播されません。要素がTRの場合、FFは奇妙に動作します。ブロックが割り当てられます。