State via CSS Selector vs. Data-Attribute Selector

by pleinx

HTML

<h3>Via CSS Selector</h3>
<button id="css">
  DoSomething
</button>

<h3>Via Data-Attribute Selector</h3>
<button id="data">
  DoSomething
</button>

CSS

button, h3 {
  margin: 10px auto;
  display: block;
  text-align: center;
  padding: 5px;
}

/* CLICKED STATE */
button.clicked,
button[data-state="clicked"] {
  background: red;
}

JavaScript

var cssButton = document.querySelector('#css');
cssButton.addEventListener('click', function() {
	// Or you can use "mySelector.classList" but remember it only works in >=IE10
	if(!cssButton.className.match(/(?:^|\s)clicked(?!\S)/)) {
  	cssButton.className += ' clicked';
  }
  else {
  	cssButton.className = cssButton.className.replace(/(?:^|\s)clicked(?!\S)/g , '');
  }
});


var dataButton = document.querySelector('#data');
dataButton.addEventListener('click', function() {
	var state = dataButton.getAttribute('data-state') || 'default';
	dataButton.setAttribute('data-state', (state === 'default' ? 'clicked' : 'default'));
});