インラインクラスを変更するjavascript/jqueryを使用するStyleプロパティ

Question

javascript/jqueryを使用してインラインクラスStyleプロパティを変更する方法。 は、例えば：

<style> 
.iexp-info-bar-body { 
    background-color: #000000; 
} 
</style> 
<div class="iexp-info-bar-body"> 
//data 
</div> 

私は＃C04848にクラス.iexp-インフォバーボディ＃000000の背景色のプロパティを変更したいです。

私はインラインCSSテクニックを知っていません/重要なキーワードを使用して色を変えてください。
は、しかし、私はjssと呼ばれるライブラリを見てください

<style> 
.iexp-info-bar-body { 
    background-color: #C04848; 
} 
</style> 
<div class="iexp-info-bar-body"> 
//data 

Answer 1

のような結果を必要とするクラス.iexp-インフォバー-bodyプロパティ すなわち のすべてのoccuranceを変更したいです。追加またはクラスを変更すると、これはあなたの質問で2番目のコードブロックに似たクラスを定義するヘッダ内のスタイルの技術を使用しています

jss.set('.demo', { 
    'font-size': '15px', 
    'color': 'red' 
}); 

と同じくらい簡単です。

Answer 2

私は、クラスを変更することを教えてくれ、非常に良い先生だった。まず

• を、それは本当に
「私の最終状態が何であるかを」AND「私の最初の状態は何である」を十分に認識することができます

これは、デザインが変更され、いくつかのトランジションを実装する必要がある場合に非常に便利です。また、CSSコードを変更するためにJavaScriptファイルにアクセスする必要もありません。

• そして、今日競合

について考え、あなただけの、そのクラスに応じて1つの要素を持っていますが、どのような場合は、あなたが明日100 000がありますか？

あなたがしたいことを達成するための最も簡単な方法は別のクラスを作ることです。もちろん

<style> 
    .iexp-info-bar-body { 
     background-color: #000000; 
    } 
    .changed { 
     background-color: #ff69b4; 
    } 
</style> 

<div class="iexp-info-bar-body"> 
//data 
</div> 

<script> 
    var all = document.querySelectorAll('.iexp-info-bar-body'); 
    for (var i = 0, length = all.length; i < length; i++) { 
     all[i].classList.remove('iexp-info-bar-body'); 
     all[i].classList.add('changed'); 
    } 
</script> 

は、これは非常に原始的であり、あなたは、あなただけのBG-colorプロパティで一つの他のクラスを追加することはできません多くの方法