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, а не только пятой.

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

Комментарии RSS

Как-раз вчера нужно было зашить инфу в атрибуты , вот только хром почему-то не схавал мой пользовательский атрибут для данного тэга.
Доктайп был XHTML 1.0

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

тэг был AREA, видимо фильтр обрубил

как зашивали, как получали доступ?

Сразу скажу - это ImageMap. Использую jQuery.

Изначально брал два стандартных атрибута: alt и title (rel у меня занят под другие нужды) для того чтобы выводить динамический попап по ховеру. Но заказчег пожаловался на то что помимо попапа всплывает браузерная желтенькая подсказка (поведение стандартного title). Поэтому от тайтла пришлось отказаться. В ИЕ-6-7 желтенькая подсказка всплывает и для атрибута alt, хотя по стандарту не должна, поэтому от alt пришлось тоже отказаться.

Пользовательским атрибутом я назвал атрибут alt2 который конечно не валиден, но для меня это не так важно как то, что в хроме jQuery из него ничего не вытаскивает. Не хочу копаться в причинах такого поведения хрома - я не веб-стандартист, а работаю на результат.

	$('.imap area').hover(function (e){
 
		var t = $(this);
		var rel = parseInt(t.attr('rel'));
		var param1 = t.attr('alt2'); // не работает в хроме
		var param2 = t.attr('alt');
 
		.....
		здесь код, который меняет позицию попапа и его контент 
		в зависимости от элемента, на котором ховер
		.....
 
 
	}, function (){
 
		.....
 
	});

В итоге пришлось воспользоваться такими атрибутами для хранения строк как href и target. От хранения нескольких строк в одном атрибуте через разделитель отказался, т.к. для ховера этажей дома, доп. вычисления могут повлиять на скорость отклика, особенно на старых компах, и особенно на старых браузерах.

ссылку на рабочий пример пока дать не могу, т.к. проект не зарелизен.

нужно писать data-alt2 а не alt2

Да, я облажался (посыпаю голову пеплом)

Действительно работает с префиксом data- в хроме.
Возьму на вооружение.

Запихивать в атрибут href данные как оказалось нельзя.
Т.к. яндекс думает что это ссылка на страницу сайта и сеошники очень сильно ругаются.
В итоге яндекс (да и гугл) видят кучу битых ссылок на сайте.

А вот и сайт, для которого я это делал. Это функционал выбора квартиры без флеша. Позже я сделал еще несколько таких штук на других сайтах недвижимости.

http://yitspb.ru/catalog/id26/?do=rooms

На красоту кода не претендует, но работает вроде шустро.

сделано круто :)

класс

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

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

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