TAG
CSS
JavaScript
Result
Run
License
<h1 class="title">Element.classList Property</h1> <button type="button" id="btn-addclass">Add class</button> <button type="button" id="btn-removeclass">Remove class</button> <button type="button" id="btn-toggleclass">Toggle class</button>
.title { border-bottom: 1px solid #CCC; padding-bottom: 10px; } .dynamic { color: #FF0000; }
window.addEventListener("load", function() { var elTitle = document.querySelector(".title"); document.querySelector("#btn-addclass").onclick = function() { elTitle.classList.add("dynamic"); }; document.querySelector("#btn-removeclass").onclick = function() { elTitle.classList.remove("dynamic"); }; document.querySelector("#btn-toggleclass").onclick = function() { elTitle.classList.toggle("dynamic"); }; });
Console
expand_less
License
License
by DevDic
Close