toggle CM

by Amens

HTML

<div class="test" test>test</div>
<!--<div></div>-->
<div test>test</div>
<!--<div></div>-->
<div class="test">test</div>
<!--<div></div>-->

<div>test</div>
<!--<div class="test" test></div>-->

<button onClick="togglePin(document.querySelectorAll('div'), 'test')">toggle</button>

CSS

.test {
  color: red;
}

[test] {
  color: red;
}

JavaScript

const togglePin = (nodes, hash, force) => {
  /* console.log(nodes) */
  Array.from(nodes).map(node => {
    if (node) {
      const pinState = node.hasAttribute(hash) || node.classList.contains(hash);
      console.log(pinState);
      if (pinState && force !== 'pin') {
        node.classList.remove(hash);
        node.removeAttribute(hash);
      } else if (!pinState && force !== 'unpin') {
        node.classList.add(hash);
        node.setAttribute(hash, '');
      }
      return node;
    }
  })
};