<main id="main" class="main">
  <button id="toggle">Toggle class</button>
</main>
main {
  border: 4px solid red;
  display: grid;
  grid-gap: 1rem;
  padding: 1rem;
  max-width: 200px;
  margin: 0 auto;
  text-align: center;
  transition: border-color 100ms ease-in-out;
}

main::before {
  background: whitesmoke;
  border-radius: 2px;
  display: inline;
  content: attr(class);
  font-family: monospace;
  padding: 2px 4px;
}

main.--blue {
  border-color: blue;
}
// Begin setup

const mainNode = document.getElementById('main')
const toggleNode = document.getElementById('toggle')

toggleNode.addEventListener('click', function() {
  mainNode.classList.toggle('--blue')
})

// End setup

function callback(mutationsList, observer) {
    console.log('Mutations:', mutationsList)
    console.log('Observer:', observer)
    mutationsList.forEach(mutation => {
        if (mutation.attributeName === 'class') {
            alert('Ch-ch-ch-changes!')
        }
    })
}

const mutationObserver = new MutationObserver(callback)

mutationObserver.observe(mainNode, { attributes: true })
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.