Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="Demonstração classList API." />
  <meta charset="utf-8">
  <title>classList API</title>
</head>
<body>
    <p>JavaScript is <span>Awesome</span>!</p>
    <button id="btn-add">Add</button>
    <button id="btn-remove">Remove</button>
    <button id="btn-toggle">Toggle</button>
    <button id="btn-contains">Contains</button>
</body>
</html>
 
.highlight {
  padding: 2px;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 2px;
  background-color: #f1da4e;
}
 
var awesome     = document.querySelector( 'span' ),
    btnAdd      = document.querySelector( '#btn-add' ),
    btnRemove   = document.querySelector( '#btn-remove' ),
    btnToggle   = document.querySelector( '#btn-toggle' ),
    btnContains = document.querySelector( '#btn-contains' );
btnAdd.addEventListener( 'click', function() {
    awesome.classList.add( 'highlight' );
}, false );
btnRemove.addEventListener( 'click', function() {
    awesome.classList.remove( 'highlight' );
}, false );
btnToggle.addEventListener( 'click', function() {
    awesome.classList.toggle( 'highlight' );
}, false );
btnContains.addEventListener( 'click', function() {
    console.log( awesome.classList.contains( 'highlight' ) );
}, false );
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x