私は JavaScript を使用しています。/var boolValに評価される変数があります。私のページにはタグがあります:truefalse<div>
<div id='div1' class="redClass"></div>
の値に基づいて、タグの CSS クラスを にvar boolVal変更します。<div>blueClass
たとえば、現在のクラスは<div>色を赤にしますが、新しいクラスは実行時にページを更新しなくてもページを青にします。
これを簡単なJavaScriptで実現できますか？
document.getElementById("MyElement").className = "MyClass";
それとも を使うべきでしょうかAddClass?
ベストアンサー1
id動的にCSSクラスを追加することができますclassListAPI は次のようになります。
document.getElementById('idOfElement').classList.add('newClassName');
または古い方法:
document.getElementById('idOfElement').className = 'newClassName';
// += to keep existing classes
あるいは、以下に示す他の DOM クエリ メソッドを使用して要素を見つけることもできます。最後の 3 つはコレクションを返すため、コレクションを反復処理してコレクション内の各要素にクラスを適用する必要があります (それぞれ以下の例と同様)。
-
elements.forEach(element => element.classList.add('newClassName')); -
Array.from(elements).forEach(element => element.classList.add('newName')); -
Array.from(elements).forEach(element => element.classList.add('newName'));
あなたの場合
var element = document.getElementById('div1');
if(boolVal)
element.className= 'blueClass'; // += ' blueClass'; to keep existing classes
else
element.className= 'redClass';