Как с помощью vanilla JS сделать класс из атрибута data-?

Question

[SuperToster]

Привет!

Подскажите пожалуйста, как с помощью vanilla JS сделать класс из атрибута data-?

<button data-color="red">red</button>
<button data-color="green">green</button>
<button data-color="blue">blue</button>

<div class="color">
  color
</div>

.color {
  &.red {
    background: red
  }

  &.green {
    background: green
  }

  &.blue {
    background: blue
  }
}

Answer 1

[Everybody_Lies]

// получаем атрибут
const color = el.getAttribute('data-color');
// устанавливаем его
el.classList.add(color);

Comments

[Lynn «Кофеман»]

Лучше получать через dataset const color = el.dataset.color;

Answer 2

[Ilya Olovyannikov]

А почему бы не использовать просто data-атрибут как селектор?

.class {
 &[data-color="red"] {
    // some code...
  }
}

Но если сильно надо, то

const elements = document.querySelectorAll('[data-color]');

elements.forEach(el => el.classList.add(el.dataset.color));

Comments

[SuperToster]

@cannibal_corpse

А почему бы не использовать просто data-атрибут как селектор?

По тому, что нет цели решить конкретную задачу. Хочу разобраться в том как это работает.