xandeadx.ru Блог музицирующего веб-девелопера

Javascript → Пользовательские атрибуты в html-тегах

Опубликовано в

В HTML5 появилась возможность добавлять к тегам пользовательские атрибуты и получать к ним доступ с помощью javascript. Такие атрибуты отличаются от стандартных префиксом data-:

<img id="img" src="kitty.png" data-color="red" data-is-protected="no" />

Ниже перечислены все доступные способы доступа к таким атрибутам.

Доступ к атрибутам с помощью метода getAttribute() (работает во всех браузерах):

color       = document.getElementById('img').getAttribute('data-color');
isProtected = document.getElementById('img').getAttribute('data-is-protected');

Доступ с помощью свойства dataset (работает только в современных браузерах):

color       = document.getElementById('img').dataset.color;
isProtected = document.getElementById('img').dataset.isProtected;

Доступ с помощью jQuery до версии 1.4.3 (работает во всех браузерах):

color       = $('#img').attr('data-color');
isProtected = $('#img').attr('data-is-protected');

Доступ с помощью jQuery 1.4.3+ (работает во всех браузерах):

color       = $('#img').data('color');
isProtected = $('#img').data('is-protected');

Доступ с помощью jQuery 1.6+:

color       = $('#img').data('color');
isProtected = $('#img').data('isProtected');

В принципе, если не обращать внимание на ошибки валидатор, то пользовательские атрибуты можно использовать в любой другой версии html, а не только пятой.

Похожие записи

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании