クラスを変更するための最新のHTML5テクニック
最近のブラウザには、ライブラリを必要とせずにクラスを簡単に操作できるようにするメソッドを提供するclassListが追加されています。
document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
if ( document.getElementById("MyElement").classList.contains('MyClass') )
document.getElementById("MyElement").classList.toggle('MyClass');
残念ながら、これらはv10より前のInternet Explorerでは機能しませんが、IE8とIE9にサポートを追加するためのシムがあり、このページから入手できます。しかし、それはますますサポートされています。
シンプルなクロスブラウザソリューション
要素を選択する標準のJavaScriptの方法はを使用していますdocument.getElementById("Id")。これは次の例で使用されています。もちろん、他の方法で要素を取得でき、適切な状況ではthis代わりに単に使用することもできます。ただし、これについて詳しく説明することは範囲外です答えの。
要素のすべてのクラスを変更するには：
既存のすべてのクラスを1つ以上の新しいクラスに置き換えるには、className属性を設定します。
document.getElementById("MyElement").className = "MyClass";
（スペース区切りのリストを使用して、複数のクラスを適用できます。）
要素にクラスを追加するには：
既存の値を削除または影響せずに要素にクラスを追加するには、次のようにスペースと新しいクラス名を追加します。
document.getElementById("MyElement").className += " MyClass";
要素からクラスを削除するには：
他の潜在的なクラスに影響を与えることなく、要素から単一のクラスを削除するには、単純な正規表現置換が必要です。
document.getElementById("MyElement").className =
document.getElementById("MyElement").className.replace
( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */
この正規表現の説明は次のとおりです。
(?:^|\s) # Match the start of the string, or any single whitespace character
MyClass # The literal text for the classname to remove
(?!\S) # Negative lookahead to verify the above is the whole classname
# Ensures there is no non-space character following
# (i.e. must be end of string or a space)
このgフラグは、クラス名が複数回追加された場合に、置換を必要に応じて繰り返すように指示します。
クラスが要素にすでに適用されているかどうかを確認するには：
クラスを削除するために上記で使用したのと同じ正規表現は、特定のクラスが存在するかどうかのチェックとしても使用できます。
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
これらのアクションをonclickイベントに割り当てる：
JavaScriptをHTMLイベント属性（などonclick="this.className+=' MyClass'"）内に直接書き込むことは可能ですが、これは推奨される動作ではありません。特に大規模なアプリケーションでは、JavaScript対話ロジックからHTMLマークアップを分離することで、より保守しやすいコードが実現されます。
これを実現するための最初のステップは、関数を作成し、onclick属性で関数を呼び出すことです。次に例を示します。
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
</script>
...
<button onclick="changeClass()">My Button</button>
（このコードをスクリプトタグに含める必要はありません。これは単に例を簡潔にするためであり、JavaScriptを個別のファイルに含める方が適切な場合があります。）
2番目のステップは、たとえばaddEventListenerを使用して、onclickイベントをHTMLからJavaScriptに移動することです。
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
window.onload = function(){
document.getElementById("MyElement").addEventListener( 'click', changeClass);
}
</script>
...
<button id="MyElement">My Button</button>
（HTMLのロードが完了した後にその関数のコンテンツが実行されるようにwindow.onloadパーツが必要です。これがないと、JavaScriptコードが呼び出されたときにMyElementが存在しない可能性があるため、行が失敗します。）
JavaScriptフレームワークとライブラリ
上記のコードはすべて標準のJavaScriptで記述されていますが、フレームワークまたはライブラリを使用して一般的なタスクを簡略化し、コードの作成時に考えられない可能性がある修正済みのバグやエッジケースを活用することは一般的です。
一部の人々は単にクラスを変更するために最大50 KBのフレームワークを追加するのはやり過ぎだと考えていますが、JavaScriptの作業、または通常とは異なるブラウザー間動作を行う可能性があるものを実行している場合は、検討する価値があります。
（大まかに言って、ライブラリは特定のタスク用に設計されたツールのセットですが、フレームワークは通常複数のライブラリを含み、一連の任務を実行します。）
上記の例は、おそらく最も一般的に使用されているJavaScriptライブラリであるjQueryを使用して以下に再現されています（調査する価値のある他のものもあります）。
（$ここにjQueryオブジェクトがあることに注意してください。）
jQueryでクラスを変更する：
$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ( $('#MyElement').hasClass('MyClass') )
さらに、jQueryは、適用されない場合にクラスを追加するためのショートカット、または適用されるクラスを削除するためのショートカットを提供します。
$('#MyElement').toggleClass('MyClass');
jQueryで関数をクリックイベントに割り当てる：
$('#MyElement').click(changeClass);
または、IDは必要ありません。
$(':button:contains(My Button)').click(changeClass);