Использование data-* атрибутов
HTML5 (en-US) спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. data-* атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или Node.setUserData() .
Синтаксис HTML
Синтаксис прост — любой атрибут, чьё имя начинается с data- , является data-* атрибутом. Предположим у нас имеется статья и мы хотим сохранить дополнительную информацию без визуального представления. Для этого можно использовать data -атрибуты:
article id="electriccars" data-columns="3" data-index-number="12314" data-parent="cars"> . article>
Доступ в JavaScript
Чтение data- атрибутов в JavaScript осуществляется также просто. Для этого можно использовать метод getAttribute() с параметром, равным полному имени атрибута. Но есть и более простой способ, используя объект dataset (en-US).
Чтобы получить data -атрибут можно взять свойство объекта dataset с именем, равным части имени атрибута после data- (обратите внимание, что дефисы в имени преобразуются в camelCase).
var article = document.getElementById('electriccars'); article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "cars"
Каждое свойство является строкой и может быть прочитано и записано. В приведённом выше примере выполнение кода article.dataset.columns = 5 приведёт к тому, что новое значение атрибута станет равным «5» .
Доступ в CSS
Заметим, что data -атрибуты являются обычными HTML-атрибутами, к которым можно получить доступ в CSS. Например, чтобы показать родительские данные о статье можно использовать генерируемый контент и CSS функцию attr() :
article::before content: attr(data-parent); >
Также можно использовать селекторы атрибутов в CSS для изменения стилей в соответствии с данным:
article[data-columns="3"] width: 400px; > article[data-columns="4"] width: 600px; >
Увидеть как это работает можно в примере на JSBin.
Data -атрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите скринкаст чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. Пример кода из скринкаста можно также посмотреть на JSBin.
Проблемы
Не храните данные, которые должны быть видимы и доступны в data -атрибутах. Дело в том, что вспомогательная техника (assistive technology) может не получить к ним доступ. В дополнение, поисковые роботы не индексируют данные, содержащиеся в data -атрибутах.
Печально, что всё простое и полезное в этой жизни не достаётся бесплатно. Internet Explorer 11+ поддерживает этот стандарт, но все более ранние версии не поддерживают dataset . Для поддержки IE 10 и более ранних версий получение доступа к data -атрибутам необходимо осуществлять через getAttribute() . Также, производительность чтения data- атрибутов по сравнению с хранением этих данных в хранилище данных JS значительно хуже. Использование dataset ещё медленнее, чем чтение данных с getAttribute() .
Тем не менее, для пользовательских метаданных, связанных с элементами, data- атрибуты являются отличным решением.
Смотрите также
- This article is adapted from Using data attributes in JavaScript and CSS on hacks.mozilla.org.
- How to use HTML5 data attributes (Sitepoint)
Element: метод getAttribute()
Метод getAttribute() интерфейса Element возвращает значение указанного атрибута.
Если атрибут не существует, то вернётся значение null или «» (пустая строка), подробности смотрите в разделе «Несуществующие атрибуты».
Если необходимо получить свойства узла , то можно использовать метод getAttributeNode() (en-US).
Синтаксис
getAttribute(attributeName)
Параметры
имя атрибута, значение которого необходимо получить.
Возвращаемое значение
Строка, содержащая значение attributeName .
Примеры
div id="div1">Привет!div>
const div1 = document.getElementById("div1"); //Привет!const exampleAttr = div1.getAttribute("id"); // "div1" const align = div1.getAttribute("align"); // null
Описание
Приведение к нижнему регистру
При вызове у HTML-элемента в HTML-документе getAttribute() приводит аргумент к нижнему регистру.
Несуществующие атрибуты
Все современные браузеры возвращают null , если у элемента нет указанного атрибута.
Получение значений криптографических одноразовых номеров
По соображениям безопасности получение криптографических одноразовых номеров («nonce») из источников, отличных от скриптов (таких как CSS селекторы и вызовы .getAttribute(«nonce») ), недоступно.
let nonce = script.getAttribute("nonce"); // вернёт пустую строку
Вместо этого следует использовать свойство nonce :
let nonce = script.nonce;
Спецификации
| Specification |
|---|
| DOM Standard # ref-for-dom-element-getattribute① |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Element.hasAttribute()
- Element.setAttribute()
- Element.removeAttribute()
- Element.toggleAttribute() (en-US)
Как получить объект из data атрибута?
Почему когда вывожу первый раз console.log(); , атрибут возвращает строку, а не объект? А если установить через JS данный атрибут, то возвращает уже объект?
Как изначально получить объект?
var data = JSON.parse( $('.js-block-obj').data('info') ); $('.js-block-obj').on('click', function() < console.log( data); $( ".js-block-obj" ).data( "info", < b: 100, s: 0 >); console.log( data ); >).block
JSON.parse не работает, выдает ошибку:
Unexpected token b in JSON at position 2
Как получить значение data атрибута?
При собитии change селекта, я в переменную location получаю value той option, которая выбрана. Но как получить значение data атрибута выбранной опции? Например, как мне получить значение атрибута data-lat ?
$('.select').on('change', function () < var location = $(this).val(); >); Отслеживать
задан 27 окт 2018 в 16:13
Sergey Konovalenko Sergey Konovalenko
856 1 1 золотой знак 9 9 серебряных знаков 24 24 бронзовых знака
Возможный дубликат вопроса: Что такое data-toggle=»modal» и для чего применяется?
27 окт 2018 в 20:56
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
var attr = $(this).getAttribute(‘data-lat’)
Отслеживать
ответ дан 27 окт 2018 в 16:19
Владимир Владимирович Владимир Владимирович
824 8 8 серебряных знаков 24 24 бронзовых знака
я пробовал так делать, но возвращается undefined
27 окт 2018 в 16:23
Обновил ответ, попробуй
27 окт 2018 в 16:26
так тоже undefined получается
27 окт 2018 в 16:27
Обновил ещё раз попробуй
27 окт 2018 в 16:30
возвращает ошибку: getAttribute is not a function
27 окт 2018 в 16:32
вот так получилось вывести:
$('.select').change(function() < var selectedOption = this.options[this.selectedIndex]; console.log(selectedOption.getAttribute("data-lat")); >); Отслеживать
ответ дан 27 окт 2018 в 16:35
Sergey Konovalenko Sergey Konovalenko
856 1 1 золотой знак 9 9 серебряных знаков 24 24 бронзовых знака
Красавчик, хорошо получилось!
27 окт 2018 в 16:38
А в JQ нужно всего лишь $(‘.elem’).data(‘lat’); .. ¯\_(ツ)_/¯
Так я jQuery и использовал, и такой способ тоже пробовал, он возвращает undefined
А как такой вариант?
$('.select').bind('change',function()< var valThis = $(this).val().split(','), lat = valThis[0], lng = valThis[1]; $('.lat').text('lat: '+lat); $('.lng').text('lng: '+lng); >); lat:
lng: