0

プロパティも含まれている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="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（display：inline-box）のネストされたスタイルを「inline」に変更します。値は子要素に継承されているようです。

CSSで除外されているのに、外部クラスの表示値を内部クラスに伝播するように設定するのはなぜですか？これを防ぐにはどうすればよいですか？

4

2 に答える 2

2

CSS で除外されているのに、外部クラスの display の値を設定すると内部クラスに伝播されるのはなぜですか?

そうではありません。

仕様から：

この値により、要素は書式設定構造に表示されなくなります (つまり、ビジュアル メディアでは、要素はボックスを生成せず、レイアウトに影響しません)。子孫要素もボックスを生成しません。要素とそのコンテンツは、フォーマット構造から完全に削除されます。この動作は、子孫に「display」プロパティを設定してもオーバーライドできません。

'none' を表示しても、非表示のボックスは作成されないことに注意してください。ボックスはまったく作成されません。CSS には、要素が書式設定に影響を与えるがそれ自体は表示されない書式設定構造内にボックスを生成できるようにするメカニズムが含まれています。詳細については、可視性のセクションを参照してください。

これを防ぐにはどうすればよいですか？

の一つ：

  • 使用していませんdisplay: none（仕様にvisibilityあるように、より良い選択かもしれません）
  • 表示したい要素を移動して、非表示にしたい要素の子孫にならないようにする
  • 非表示にする要素を変更する (たとえば、現在非表示にしている要素の子孫であり、表示する要素の兄弟である要素の数を選択するなど)。
于 2012-04-06T10:29:54.147 に答える
0

FF11を使用していることを追加する必要がありました。バグ、欠点、または「レガシー」を発見したのかもしれませんが、秘訣は次のとおりです。

  1. クラス 'zapfenintermeddivisionrow' (最初に display:none を含む) は、テーブル行である TR に割り当てられます。
  2. display:table-row プロパティhttp://www.w3schools.com/cssref/pr_class_display.aspがありますが、これまで聞いたことはありません。
  3. items[i].style.display を 'none' と 'table-row' の間で切り替えることで、私がすべきだと思っていたことを実行しています。

@powerbuoy が正しく述べているように、スタイル属性は子に自動的に反映されません。要素が TR の場合、FF は奇妙な動作をします。ブロックが割り当てられます。

于 2012-04-06T16:22:06.817 に答える