javascript - 複数の要素に同じ CSS 属性を適用する

Question

ユーザーが入力する色が必要な一連の要素 (20 以上) があります。PHP + CSS を使用すると、次の出力が得られます。

#one, #two, #three, #four, #five, #etc { color: #222; }

正常に動作しますが、jQuery/Javascript を使用して DOM がロードされた後、その色を編集する必要があります。繰り返しますが、これはユーザーエントリになるため、色は何でもかまいません。

一度にすべての要素に変更を適用する簡単な方法はありますか? または、次のことを行う必要がありますか?

$('#one').css('color', newColor );
$('#two').css('color', newColor );
.... etc

前述したように、この変更が必要な要素が 20 以上あるため、方法があることを願っています。みんなありがとう

score 6 · Accepted Answer

できるよ：

$('#one, #two, #three, #four, #five, #etc').css('color', newColor );

ただし、それらに共通のクラスが割り当てられている場合は、より簡単になります。

$('.commonCls').css('color', newColor );

または、これらの要素がdivコンテナ内にあり、コンテナ内にある場合は、そのままcontainer実行できます。

 $('.container').find('div').css('color', newColor);

事前に色がわかっている場合は、クラス名の cssrule を追加し、そのクラスをこれらの要素に追加するだけで、インラインカラーを指定するよりもカスケードに役立ちます (css()そうです)。

$('.commonCls').addClass(newClass);

id を使用する必要があり、id に共通部分がある場合は、追加します。例:#one-Section, #two-Section etc..属性 endwith セレクター ($) を使用できます。contains (*) および startswith (^) セレクターもあります。

$('[id$="Section"]').addClass(newClass); //or .css

score 0 · Accepted Answer

クラスセレクターを使用できます。

$('.myclass').css('color', newColor );

or

$('#one, #two, #three, #four, #five, #etc').css('color', newColor );

2 に答える 2