SuperToster
@SuperToster

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

Привет!

Подскажите пожалуйста, как с помощью 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
  }
}
  • Вопрос задан
  • 121 просмотр
Решения вопроса 1
@Everybody_Lies
// получаем атрибут
const color = el.getAttribute('data-color');
// устанавливаем его
el.classList.add(color);
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
cannibal_corpse
@cannibal_corpse
Верстальщик руками
А почему бы не использовать просто data-атрибут как селектор?
.class {
 &[data-color="red"] {
    // some code...
  }
}


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

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

elements.forEach(el => el.classList.add(el.dataset.color));
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы