—»     —»   Используем собственные атрибуты в HTML5
  Раздел: Образование и Изучение   Нет комментариев  

Используем собственные атрибуты в HTML5

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

До появления HTML5 было возможно добавлять собственные атрибуты к элементам HTML и осуществлять к ним доступ посредством javascript, но если вы когда-либо пробовали это реализовать, то наверняка знаете о том, что в этом случае нам придется забыть о валидации кода. HTML5 предлагает нам возможность создавать и использовать собственные атрибуты элементов внутри валидных страниц.

Используем собственные атрибуты в HTML5

Создание документа HTML5

Если у вас нет готового шаблона, над которым можно было бы поработать, то просто скопируйте предложенный код в HTML-файл:

<!DOCTYPE html>
<html>
<head>
<script>
/*functions here*/
</script>
</head>
<body>
</body>
</html>

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

Создание элемента

Давайте добавим элемент с простеньким контентом, и добавим собственный атрибут вместе с ID для того, чтобы иметь возможность идентифицировать этот элемент в javascript, использованном в демо:

<div id="product1" data-product-category="clothing">
Cotton Shirt
</div>

Как видно, собственный атрибут имеет форму «data-*» с именем (или именами) на ваше усмотрение после части «data-». Это единственный валидный способ применения собственных атрибутов в HTML5, так что не забудьте всегда начинать названия элементов с этого указателя, если вам хочется, чтобы страницы были валидными.

Конечно же, детали вашего собственного проекта будут диктовать, окажутся ли собственные атрибуты удобными для вас или нет, а также эти детали помогут вам выдумывать соответствующие имена элементов. Данный пример может быть использован для веб-сайта-магазина с розничной торговлей. Собственные атрибуты позволят вам обрабатывать элементы определенными способами в рамках кода javascript на странице. Например, когда вы используете функции анимационного отображения. Это действительно единственный рекомендуемый способ использования собственных атрибутов, если, конечно, в данной ситуации не существует уже заранее предназначенного стандартного HTML-атрибута.

Добавляем тестовую кнопку

Ваши собственные javascript-функции будут обрабатывать события на ваших страницах, но для наглядного примера добавьте представленную кнопку на страницу:

<input type="button" value="get attribute" onclick="getElementAttribute('product1')"/>

Кнопка проводит ID элемента в качестве параметра таким образом, чтобы javascript-функция могла обратиться к нему, и осуществить доступ к собственному атрибуту.

Получение атрибута

Самый распространенный способ осуществления доступа к атрибутам в javascript заключается в использовании getAttributes, что мы и сделаем в первую очередь. Добавьте следующую функцию в раздел со скриптами, расположенный в головной секции вашей страницы:

function getElementAttribute(elemID) {
var theElement = document.getElementById(elemID);
var theAttribute = theElement.getAttribute('data-product-category');
alert(theAttribute);
}

Ради наглядности, мы приводим атрибут в готовность, но ваши собственные скрипты могут выполнять то, что необходимо вам.

Получение набора данных (dataset)

Как альтернативу DOM-методу «getAttributes», вы можете использовать наборы данных (dataset) элемента. Этот подход может быть более эффективным, особенно в тех случаях, когда ваш код повторяется в нескольких атрибутах. Тем не менее, браузерная поддержка данного метода пока еще очень плохая, что также важно учитывать. Данный код выполняет тот же самый процесс:

//var theAttribute = theElement.getAttribute('data-product-category');
var theAttribute = theElement.dataset.productCategory;

С помощью наборов данных вы можете избежать использования аффикса «data-» в начале имени атрибутов при обращении к ним javascript-функций, которые вам по прежнему придется включать в HTML. Учтите что, если имя вашего собственного атрибута имеет в себе дефис (который есть в имени нашего атрибута), то у нас здесь получается горбатый регистр, если доступ осуществляется посредством набора данных «data-product-category» становится «productCategory»).

Другие методы и функции

Мы рассказали вам о том, как создавать атрибуты, но ваши скрипты также могут создавать их или удалять. Следующий код демонстрирует нам процесс настройки атрибутов посредством стандартного javascript-метода и набора данных в качестве альтернативы:

//DOM method
theElement.setAttribute('data-product-category', 'sale');

//dataset version
theElement.dataset.productCategory = "sale";

Для того чтобы убрать атрибут, вы также можете использовать либо набор данных, либо DOM-метод:

//DOM method
theElement.removeAttribute('data-product-category');

//dataset version
theElement.dataset.productCategory = null;

Вывод

Внедрение собственных атрибутов в HTML5 – это, с технической точки зрения, не такой уж и сложный процесс, но при этом сама сложность возникает в том, каким образом было бы правильнее их применить в собственных проектах. В конце концов, запомните тот факт, что еще слишком рано полностью переходить на использование наборов данных, и если вы все-таки решите их использовать, то постарайтесь предоставить откат для браузеров, которые не поддерживают данную технологию.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5, javascript
Опубликовал Design FactoRy   Прочитано (раз): 14186   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Купить двери
Продажа и покупка. Купить двери межкомнатные
td-52.ru
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031