Комментарии
18
В свое время, работа с «data-» стала для меня откровением, сейчас без этого сложный дизайн не сверстать. Благодарю за статью, интересно и освежил память)
А можно пример, который проще\лучше сделать на data-*, чем на классах?
Так data-* и не должна использоваться в CSS, этот тег придумали для бъединения JS и HTML, а то что используют CSS селекторы атрибутов, вместо классов, то можно руки поотрывать, не спорю, есть некоторые моменты, в которых, без атрибутных селекторов, не обойтись, но их на сайте должно быть еденицы.
data-theme='dark' на html и css vars в зависимости от data-theme — почти в каждой статье о темах, модно-молодёжно.
А .theme-dark чем не устраивает модных и молодёжных фронтдендеров?
Вон, в бутстрапе пресловутом примерно так же реализовано.
input[type=«radio»]
input[type=«checkbox»]…
яркие такие моменты
input[type=«checkbox»]…
яркие такие моменты
<tr data-id="12345"><td>Селиван Сталлоне</td></tr>
<tr data-id="12346"><td>Галина Гадот</td></tr>
var ids = querySelectorAll('tr[data]');
cosnsole.log( ids[0].dataset.id ); // 12345
В четырех строках описали смысл статьи. Спасибо!
Если нулевой индекс захардкожен, то All можно было не делать
можно
цель примера — показать с помощью минимального кода что это массив
цель примера — показать с помощью минимального кода что это массив
Только это не массив
Это node list, подобие массива.
извините там ошибка, правильно:
codepen.io/shuchkin/pen/WNvXWJQ
var ids = document.querySelectorAll('tr[data-id]');
console.log( ids[0].dataset.id ); // 12345codepen.io/shuchkin/pen/WNvXWJQ
Когда-то, как PoC, сделал на них SPA без JS стейта. То есть все данные приложения лежали в атрибутах. Локальные переменные в хендерах были, но без долгоживущих замыканий. В принципе работало, но тормозило на каждый чих DOM менять
Все, что написано в секции с селекторами и многое в других секциях, справедливо для любых HTML-атрибутов вообще, а не только для data-*. Единственная особенность data-атрибутов — это проброс значений в свойство dataset у DOM-элемента.
Статья как нельзя кстати подошла. Помогла быстро решить проблему реализации DND — отделить мух от котлет дроп просто в контейнер или дроп на существующие элементы контейнера!
Тема действительно не распространенная, что странно. Поддержка браузерами заявлена широкая.
Тема действительно не распространенная, что странно. Поддержка браузерами заявлена широкая.
Годная статья, но я бы верблюжий регистр оставил как CamelCase.
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.
Полное руководство по HTML-атрибутам data-*