classの存在確認

コード例 - Sample

HTML

<div class="example">
 <p id="a1">テキスト</p> <!--←ここにclassを追加・削除-->
 <input type="button" id="a1-contain-bt" value="「test」classの存在確認">
 <input type="button" id="a1-addremove-bt" value="「test」classの追加・削除">
 <p class="text">ここに結果が表示されます【<span id="a1-text">－</span>】</p>
</div>

CSS

/*追加されるclass用にcssを用意*/
.example>.test{
 color: #fff;
 background-color: #4f5b93;
}

JavaScript

<script>
//「test」classの追加・削除
document.getElementById('a1-addremove-bt').addEventListener('click', function(){
 document.getElementById('a1').classList.toggle('test');
});

//classの存在確認
document.getElementById('a1-contain-bt').addEventListener('click', function(){
 if(document.getElementById('a1').classList.contains('test')){
  document.getElementById('a1-text').innerText = '存在します';
 }else{
  document.getElementById('a1-text').innerText = '存在しません';
 }
});
</script>