[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか？

質問

HTML要素のクラスが onclick またはその他のイベントをJavaScriptで実行できますか？

解決方法は？

クラスを変更するためのHTML5の最新テクニック

モダンブラウザは クラスリスト は、ライブラリを必要とせずにクラスを簡単に操作するためのメソッドを提供します。

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 しかし、これについての詳細は、この回答の範囲外です。

ある要素のすべてのクラスを変更する場合。

既存のすべてのクラスを一つまたは複数の新しいクラスに置き換えるには、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 the end of the string or space)

は g フラグは、クラス名が複数回追加されている場合に、 必要に応じて繰り返すよう置換を指示します。

ある要素にすでにクラスが適用されているかどうかを確認する。

上でクラスを削除するために使用したのと同じ正規表現は、特定のクラスが存在するかどうかのチェックとしても使用できます。

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

### これらのアクションをonclickイベントに割り当てる。

HTML のイベント属性（例えば onclick="this.className+=' MyClass'" これは推奨されない動作です。特に大規模なアプリケーションでは、HTMLのマークアップとJavaScriptの対話ロジックを分離することで、より保守性の高いコードを実現できます。

これを実現するための第一歩は、関数を作成し、onclick属性などで関数を呼び出すことです。

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

<サブ (このコードをscriptタグで記述する必要はありません。これは単に例を簡潔にするためで、JavaScriptを個別のファイルに含める方がより適切な場合があります)。

2番目のステップは、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>

(ただし、window.onloadの部分は、その関数の内容が実行されるようにするために必要です。 後 これがないと、JavaScript のコードが呼び出されたときに MyElement が存在しないかもしれないので、この行は失敗します)。

JavaScriptのフレームワークとライブラリ

上記のコードはすべて標準的なJavaScriptですが、フレームワークやライブラリを使用することで、一般的な作業を簡略化したり、コードを書くときに思いつかないようなバグやエッジケースを修正したりすることができます。

クラスを変更するだけで、50KB程度のフレームワークを追加するのはやりすぎだと考える人もいますが、もしあなたが相当量のJavaScript作業や、クロスブラウザで異常な動作をするようなことを行っているなら、検討する価値は十分にあると思います。

(非常に大雑把に言うと、ライブラリは特定のタスクのために設計されたツールのセットであり、一方フレームワークは一般的に複数のライブラリを含み、完全な職務のセットを実行する)。

上記の例は、以下を使用して再現されています。 jQuery おそらく最もよく使われているJavaScriptライブラリです（他にも調べる価値のあるライブラリはありますが）。

(ただし $ は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);