var sample = document.getElementById('sample'); var out = document.getElementById('out'); var token = sample.classList; function add(cName) { token.add(cName); out.innerHTML = cName + " 를 추가 하였습니다."; } function remove(cName) { token.remove(cName); out.innerHTML = cName + " 를 제거 하였습니다."; } function contain(cName) { if (token.contains(cName)) { out.innerHTML = "클래스에 " + cName + " 값이 존재 합니다."; } else { out.innerHTML = "클래스에 " + cName + " 값이 존재 하지 않습니다."; } } function toggle(cName) { token.toggle(cName); out.innerHTML = cName + " 를 토글합니다."; }
<button type="button" onclick="add('myClass')">add()</button> <button type="button" onclick="remove('myClass')">remove()</button> <button type="button" onclick="contain('myClass')">contains()</button> <button type="button" onclick="toggle('myClass')">toggle()</button> <hr> <p id="out">버튼을 클릭하여 myClass 값을 추가 제거 토글 합니다.</p> <hr> <p id="sample"> <i>element</i>.classList 속성은 DOMTokenList 객체를 반환합니다. </p>