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

Question

[Станислав]

Подскажите пожалуйста, как присвоить значение тегам по их атрибутам:
- если в атрибуте пусто - фон красный
- если что-то есть в атрибуте - фон синий

Мне удается сделать только одну итерацию.
Заранее благодарю!

Comments

[Вадим]

let elem = document.querySelector('.card');

Находит только первую карточку в разметке, удовлетворяющую селектор.

Поменяйте на querySelectorAll и обходите через forEach

И с дата атрибутами можно работать проще.

-let value = elem.getAttribute('data-background-image');
+let value = elem.dataset.backgroundImage;

[Станислав]

Вадим, спасибо!
Пробую, но
let value = elem.dataset.backgroundImage;
не проверяет, есть ли что-то в дата-атрибуте

[Сергей Соколов]

codepen в вопросе изменился, и теперь не демонстирует начальную проблему

Answer 1

[Сергей Соколов]

data-атрибуты должны непременно начинаться именно с "data-" с дефисом.

Comments

[Станислав]

Спасибо, хорошее решение!
Но у меня такая задача специфическая: на сайте все элементы с атрибутом data-background-image, а dataset.backgroundimage не хочет работать с элементами где есть тире. Вроде так

[Сергей Соколов]

Станислав, атрибут "data-background-image" транслируется в camel-case
dataset.backgroundImage («i» заглавная)

Обновил codepen

[Станислав]

Сергей Соколов, работает! Спасибо!