オリジナルjs削除追加classプロパティの変更

1787 ワード

実はhtml 5はclass操作に関するAPIを拡張しており、classList属性はclassの削除と判断を実現している.classListプロパティのメソッドは、次のとおりです.
  • add(value)クラス名を追加し、ある場合は
  • を追加しません.
  • contains(value)はクラス名が存在するか否かを判断し、Boolean値
  • を返す.
  • remove(value)リストからクラス名
  • を削除
  • toggle(value)切り替えクラス名:リストに存在する場合は削除、そうでない場合は
  • を追加
    紅宝書によると、現在classList属性をサポートしているブラウザにはFireFox 3.6+とChromeがある.したがって、互換性を向上させるために、これらの方法を手動で実現することができます.ここではDOMプロパティclassNameを使用して、常にこのオブジェクトを操作しています.
    function hasClass( elements,cName ){ 
      return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); 
    }; 
    function addClass( elements,cName ){ 
      if( !hasClass( elements,cName ) ){ 
        elements.className += " " + cName; 
      }; 
    }; 
    function removeClass( elements,cName ){ 
      if( hasClass( elements,cName ) ){ 
        elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" ), " " );
      }; 
    };