Comments 18
В свое время, работа с «data-» стала для меня откровением, сейчас без этого сложный дизайн не сверстать. Благодарю за статью, интересно и освежил память)
+1
А можно пример, который проще\лучше сделать на data-*, чем на классах?
+3
Так data-* и не должна использоваться в CSS, этот тег придумали для бъединения JS и HTML, а то что используют CSS селекторы атрибутов, вместо классов, то можно руки поотрывать, не спорю, есть некоторые моменты, в которых, без атрибутных селекторов, не обойтись, но их на сайте должно быть еденицы.
+4
data-theme='dark' на html и css vars в зависимости от data-theme — почти в каждой статье о темах, модно-молодёжно.
0
input[type=«radio»]
input[type=«checkbox»]…
яркие такие моменты
input[type=«checkbox»]…
яркие такие моменты
0
<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
+2
В четырех строках описали смысл статьи. Спасибо!
+1
UFO just landed and posted this here
Если нулевой индекс захардкожен, то All можно было не делать
0
извините там ошибка, правильно:
codepen.io/shuchkin/pen/WNvXWJQ
var ids = document.querySelectorAll('tr[data-id]');
console.log( ids[0].dataset.id ); // 12345
codepen.io/shuchkin/pen/WNvXWJQ
0
Когда-то, как PoC, сделал на них SPA без JS стейта. То есть все данные приложения лежали в атрибутах. Локальные переменные в хендерах были, но без долгоживущих замыканий. В принципе работало, но тормозило на каждый чих DOM менять
0
Все, что написано в секции с селекторами и многое в других секциях, справедливо для любых HTML-атрибутов вообще, а не только для data-*. Единственная особенность data-атрибутов — это проброс значений в свойство dataset у DOM-элемента.
0
Статья как нельзя кстати подошла. Помогла быстро решить проблему реализации DND — отделить мух от котлет дроп просто в контейнер или дроп на существующие элементы контейнера!
Тема действительно не распространенная, что странно. Поддержка браузерами заявлена широкая.
Тема действительно не распространенная, что странно. Поддержка браузерами заявлена широкая.
0
Годная статья, но я бы верблюжий регистр оставил как CamelCase.
0
Sign up to leave a comment.
Полное руководство по HTML-атрибутам data-*