4

パフォーマンスが低下すると思われる要素に新しいクラス名を追加する前に、重複するクラス名をチェックするフレームワークが多数あることがわかりました。

要素のクラス名が重複しているときに問題はありますか？

また、重複するクラス名が使用されている間、競合することなくCSSクラスを適用します。

<div class="aa bb cc aa"></div>

elem.className += ' ' + 'aa ee'要素に重複するクラス名がある場合でも、のようにクラス名を追加しても大丈夫ですか？

4

3 に答える 3

6

クラス名が重複していても「間違っている」ことはなく、冗長なだけです。パフォーマンスへの影響はおそらくわずかですが、重複が多い場合にのみ、実際に大きな違いが生じます。

また、重複を防ぐことは、物事を整頓するのに役立ちます。

于 2012-04-07T01:10:24.733 に答える
1

セマンティックUIは属性セレクターを多用します

ここみたいに

.ui.grid [class*="left floated"].column {
  margin-right: auto;
}
.ui.grid [class*="right floated"].column {
  margin-left: auto;
}

margin-leftが必要な場合margin-rightはauto value、クラス名セグメントの複製が必要ですfloated（例<div class="left floated right floated">Lorem</div>） 。

于 2018-12-05T15:01:16.980 に答える
1

ES6は、DOM要素のクラス名を追加および削除およびテストするための便利なAPIを提供します：classList.add（name）およびclassList.remove（name）およびclassList.contains（name）。

ES6のコンテキストでは、質問はおそらく次のように言い換えることができます。

「.classList.add（）を使用して同じclassNameを複数回追加し、そのクラスをclassList.remove（）で削除したい場合、classList.remove（）を複数回呼び出す必要がありますか？

幸いなことに、答えは.classList.remove（）を1回呼び出すだけで、何度追加しても特定のクラスを削除できるようです。

私はグーグルによってこれに対する簡単な答えを見つけることができなかったので、私はそれがどのように振る舞うかを私に伝えるために次のテストを書きました。引数としてDOM要素を使用して以下の関数を呼び出しても、エラーはスローされません。

function testClassListRemove (dem)
{
  dem.classList.add ("hello");
  dem.classList.add ("hello");
  dem.classList.add ("hello");
  ok (dem.classList.contains ("hello") );

  dem.classList.remove ("hello");
  ok (!  dem.classList.contains ("hello") );

  function ok (b)
  { if (! b)
    { throw new Error ('not ok ');
    }
  }
}
于 2020-05-31T14:16:20.177 に答える