原生jsでaddClass,removeClass,hasClassを実現する方法

実は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|$)" ), " " );
  }; 
};