javascript - jQuery を使用して、特定の CSS を持つすべての要素を選択します

Question

jQueryを使用して、特定のCSSプロパティが適用されたすべての要素を選択するにはどうすればよいですか? 例えば：

.Title
{
    color:red;
    rounded:true;
}

.Caption
{
    color:black;
    rounded:true;
}

「rounded」という名前のプロパティで選択する方法は?

CSS クラス名は非常に柔軟です。

$(".Title").corner();
$(".Caption").corner();

この 2 つの操作を 1 つの操作に置き換える方法。多分このようなもの：

$(".*->rounded").corner();

これを行うより良い方法はありますか？

score 38 · Accepted Answer

適用された CSS プロパティに基づいて (CSS セレクターを使用して) 要素を選択することはできません。

これを手動で行いたい場合は、ドキュメント内のすべての要素を選択し、それらをループして、関心のあるプロパティの計算値を確認することができます (これはおそらく実際の CSS プロパティでのみ機能し、そのようなものではありません)としてrounded）。また、遅くなります。

編集に応じて更新 —グループセレクター:

$(".Title, .Caption").corner();

score 15 · Accepted Answer

ビジューに似てる。ほんの少しの機能強化:

$('[class]').filter(function() {
    return $(this).css('your css property') == 'the expected value';
  }
).corner();

$('[class]') を使用する方が良いと思います：

ここに例があります。

score -2 · Accepted Answer

カスタム CSS プロパティは継承されないため、各要素に直接適用する必要があります (js を使用して動的にプロパティを追加する場合でも、クラスを追加する必要があります)。

CSS

.Title
{
    color:red;
}

.Caption
{
    color:black;
}

HTML

rounded:true プロパティを定義する必要はまったくありません。「Rounded」クラスの存在を使用するだけです：

<div class='Title Rounded'><h1>Title</h1></div>
<div class='Caption Rounded'>Caption</div>

JS

jQuery( '.Rounded' ).corner();

6 に答える 6