Где прописывать атрибут data template style true. Исходное значение value

Влад Мержевич

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

• Создание всплывающих подсказок без применения скриптов.
• Определение стиля элемента на основе значения атрибута.
• Получение и изменение значений через скрипты.

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

• всегда начинаем с data-;
• используем только латинские буквы, дефис (-), двоеточие (:) и подчёркивание (_).

CSS и JavaScript немного по разному обращаются к таким атрибутам, так что разберём примеры для них отдельно.

CSS

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

Содержимое

Теперь можем в стилях обратиться к этому элементу как div и установить для него нужное оформление. В общем, это напоминает работу классов, поэтому не является какой-то уникальной или необходимой фичей. Так что полезнее задавать значения.

Содержимое

В CSS после этого можем задавать разный стиль при различных значениях нашего атрибута data-columns.

Div { width: 480px; } div { width: 720px; }

Опять же, это в какой-то мере является заменой классам, ничего ведь не мешает сделать классы с именами column-2, column-3 и добавлять их при необходимости.

Более изящной областью применения выступает включение функции attr() . Она получает значение заданного атрибута и вставляет его в стиль. Удобно это использовать для создания всплывающих подсказок. Текст пишем прямо внутри элемента, а вывод и оформление подсказки реализуем с помощью CSS.

Всплывающая подсказка meter { position: relative; } meter:hover::after { content: attr(data-description); background: #ffe; padding: 5px; border: 1px solid #666; position: absolute; top: 20px; }

Температура воды

В данном примере к элементу добавляется атрибут data-description содержащий необходимый текст для вывода. Само отображение происходит с помощью псевдоэлемента ::after и свойства content , значением которого как раз и выступает функция attr() .

JavaScript

Если в CSS мы обращаемся к имени атрибута напрямую, указывая его полностью, то в JavaScript это делается через метод dataset. Само имя атрибута преобразовывается в переменную по следующим правилам:

• data- отбрасывается;
• любой дефис идущий перед буквой отбрасывается, а буква за ним становится заглавной.

На практике это выглядит так.

data-description превращается в description.
data-full-description превращается fullDescription.
data-description-of-tag превращается descriptionOfTag.

Традиционный способ получить доступ к элементу и его атрибутам - задать идентификатор и обратиться к элементу через getElementById , как показано в примере ниже.

dataset Пользователь var el = document.getElementById("user"); id = el.dataset.id; // Получаем значение атрибута data-id user = el.dataset.user; dob = el.dataset.dateOfBirth; // Получаем значение атрибута data-date-of-birth el.dataset.ban = "Нет"; // Назначаем новый атрибут data-ban и его значение console.log(user); // Выводим в консоль значение переменной user console.log(dob); // Выводим в консоль значение переменной dob

Вначале добавляем к элементу идентификатор с уникальным значением. Затем получаем доступ к элементу через getElementById . Теперь мы можем обращаться к любым атрибутам data через метод dataset , причём не только получать, но и устанавливать значения. Храниться они будут до перезагрузки страницы или до установки нового значения.

Позволяет создавать свои атрибуты для хранения произвольной информации. Данные могут быть получены с помощью скриптов или через стилевую функцию attr() .

Имя атрибута должно обязательно начинаться с data-, дальше можно использовать латинские буквы в нижнем регистре, цифры и следующие символы: дефис (-), двоеточие (:), подчёркивание (_).

Имена атрибутов трансформируются в переменные, к которым в дальнейшем можно обращаться и получать значения, по следующим правилам:

• data- удаляется;
• любой дефис идущий перед буквой удаляется, а буква за ним становится заглавной;
• любые другие буквы остаются неизменными.

Например, атрибут data-date-of-birth преобразуется в переменную dateOfBirth.

Для обращения к атрибутам и получения их значений через скрипты применяется метод dataset . Он же используется и для установки нового значения.

значение = элемент .dataset.атрибут элемент .dataset.атрибут = значение

Здесь имя атрибута - это переменная, полученная путём изменения атрибута по вышеприведённым правилам (dateOfBirth, а не data-date-of-birth или date-of-birth).

Пример

data-* Пользователь var el = document.getElementById("user"); id = el.dataset.id; // Получаем значение атрибута data-id user = el.dataset.user; dob = el.dataset.dateOfBirth; // Получаем значение атрибута data-date-of-birth el.dataset.ban = "Нет"; // Назначаем новый атрибут data-ban и его значение console.log(user); // Выводим в консоль значение переменной user console.log(dob); // Выводим в консоль значение переменной dob

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации ) - первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living ) - он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

× Браузеры

В таблице браузеров применяются следующие обозначения.

До создания HTML5 работать с атрибутами в HTML элементах, мягко говоря, не доставляло удовольствия. Приходилось использовать такие атрибуты, как rel или class . А некоторые разработчики даже создавали свои атрибуты.

Но дело координально изменилось когда HTML5 предоставил нам возможность использования своих data атрибутов. Теперь довольно легко можно сохранять дополнительные данные стандартными средствами.

Как же работают дата атрибуты?

Название говорит само за себя. Дата атрибуты хранят в себе какие-то данные, заданные вами. Они всегда начинаются с приставки data- и заканчиваются чем то более понятным для разработчика (по спецификации допускаются только символы нижнего регистра и дефисы). Элемент может содержать в себе любое количество дата атрибутов.

Пример использования атрибутов для хранения данных о пользоватле:

Calvin

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

Приведем пример кнопки для удаления чего-либо на вашей странице:

Delete

Все необходимые параметры у вас под рукой и готовы для отправки в скрипт бекэнда. Никаких больше rel атрибутов или обработки ID или необходимого действия из других атрибутов.

Что можно хранить?

Стоить помнить только одно правило, в дата атрибутах нельзя хранить объекты. То есть, можно, если их предварительно сериализовать. Сейчас просто запомните, что, впринципе, хранить можно только строковые данные.

Чтение/запись атрибутов средствами javascript

Вернемся к примеру с кнопкой и посмотрим как нам получить доступ к нужным атрибутам.

// Это кнопка var button = document.getElementById("your-button-id"); // Получаем значение var cmd = button.getAttribute("data-cmd"); var id = button.getAttribute("data-id"); // Изменяем значение button.setAttribute("data-cmd", yourNewCmd); button.setAttribute("data-id", yourNewId);

Довольно просто, не так ли? Теперь просто передавайте параметры cmd и id вашему приложению и выполняйте необходимый ajax запрос.

Чтение/запись дата атрибутов при помощи jQuery.

Приведем аналог на jQuery:

// Получаем значение var cmd = $("#your-button-id").attr("data-cmd"); var id = $("#your-button-id").attr("data-id"); // Изменяем значение $("#your-button-id") .attr("data-cmd", yourNewCmd) .attr("data-id", yourNewId);

Не путайте с методом data() . Хотя у них есть что-то общее, в целом это абсолютно разные вещи. Даже если вы не полностью знакомы с этими методами, просто используйте attr() .

Использование dataset API

HTML5 даже предлагает нам API для работы с data атрибутами, хотя IE10 и ниже не поддерживает его.

Опять таки пример с кнопкой, но на этот раз при помощи data set API:

// Это кнопка var button = document.getElementById("your-button-id"); // Получаем значение var cmd = button.dataset.cmd; var id = button.dataset.id; // Изменяем значение button.dataset.cmd = yourNewCmd; button.dataset.id = yourNewId;

Обратите внимание на отсутсвие приставки data и дефисов. Так же как и при работе со свойтсвами CSS в JavaScript вам потребуется "горбатый" регистр. Dataset API переводит имена атрибутов таким образом что data-some-attribute-name в HTML превращается в dataset.someAttributeName в JavaScript.

Что можно делать с дата атрибутами

Приведенные примеры - это только фундамент. Вы можете выполнять гораздо более сложные операции с дата атрибутами. Давайте рассмотрим несколько примеров.

Фильтрация

Допустим вы работаете со списком элементов и вам необходимо отфильтровать их по ключевому слову. Разместите ключевые слова в data атрибутах и при помощи небольшого итерационного скрипта обработайте их.

• Ford
• Chevrolet
...

Пример “на коленке”:

$("#filter").on("keyup", function() { var keyword = $(this).val().toLowerCase(); $(".cars > li").each(function() { $(this).toggle(keyword.length < 1 || $(this).attr("data-models").indexOf(keyword) > -1); }); });

Стилизация

Конечно стили лучше применять посредством классов, но тоже самое можно сделать и при помощи data атрибутов. Вот так можно применить стиль к элементам, имеющим определенный data атрибут, независимо от его значниния. Сначал взглянем на HTML:

А теперь CSS:

{ background: red; }

Но как же учитывать значение атрибута? Вот так можно применить стиль ко всем элементам с атрибутом data-warning чье значение содержит в себе слово error:

{ color: red; }

Настройка

Известный фреймворк Bootstrap применяет data атрибуты для настройки своих JavaScript плагинов. Пример всплывающего окна:

Popover on top

Лучший способ хранить данные

Дата атрибуты очень распространены в веб технологиях. Но самое важное то, что они полностью поддерживаются старыми браузерами и все глубже и глубже проникают в веб стандарты. А так стандарт HTML уже утверждён, то работать с ними можно уже сегодня и не бояться, что вдруг они пропадут завтра.

Давным-давно, во времена XHTML/HTML4 у разработчиков было всего несколько возможностей, которыми они могли пользоваться для того, чтобы хранить произвольные данные, относящиеся к DOM. Вы могли изобретать свои собственные атрибуты, но это было рискованно - ваш код не был бы валидным, браузеры могли игнорировать ваши данные, и это могло вызвать проблемы, если название совпадало со стандартными атрибутами HTML.

Поэтому большинство разработчиков завязывались на атрибуты class или rel так как они были единственным разумным способом хранить дополнительные строки. К примеру, предположим, что мы создаем виджет для отображения сообщений типа временной линии сообщений в Twitter. В идеале JavaScript должен иметь возможность конфигурирования без необходимости переписывать код, так что мы определяем идентификатор пользователя в атрибуте class, например:

Наш JavaScript код будет искать элемент с ID msglist . С помощью скрипта мы будем искать классы, начинающиеся с user_ , а “bob” в нашем случае будет идентификатором пользователя, и мы отобразим все сообщения этого пользователя.

Скажем, мы бы хотели также задать максимальное количество сообщений, и пропускать сообщения старше шести месяцев (180 дней):

Наш атрибут class очень быстро загромождается - проще допустить ошибку, а разбор строк на JavaScript становится все сложнее.

Data-атрибуты HTML5

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

Пользовательские data-атрибуты:

• это строки - в них вы можете хранить любую информацию, которая может быть представлена или закодирована в виде строки, например JSON. Приведение типов должно осуществляться с помощью JavaScript
• должны использоваться в тех случаях, когда нет подходящих элементов HTML5 или атрибутов
• относятся только к странице. В отличие от микроформатов они должны игнорироваться внешними системами, типа поисковых систем и поисковых роботов

Пример №1 обработки на JavaScript: getAttribute и setAttribute

Все браузеры позволяют вам получить и изменить data-атрибуты с использованием методов getAttribute и setAttribute:

Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("data-list-size", +show+3);

Это работает, но должно использоваться только для поддержания совместимости со старыми браузерами.

Пример №2 обработки на JavaScript: метод data() библиотеки jQuery

Начиная с версии jQuery 1.4.3 метод data() обрабатывает data-атрибуты HTML5. Вам нет необходимости явно указывать префикс data- , так что подобный код будет работать:

Var msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("list-size", show+3);

Но как бы то ни было, имейте в виду, что jQuery пытается конвертировать значения таких атрибутов в подхдящие типы (булевы значения, числа, объекты, массивы или null) и затронет DOM. В отличие от setAttribute , метод data() физически не заменит атрибут data-list-size - если вы проверите его значение вне jQuery - оно все еще останется равным 5.

Пример №3 обработки на JavaScript: API для работы с наборами данных

И, наконец, у нас есть API для работы с наборами данных HTML5, которое возвращает объект DOMStringMap. Необходимо помнить, что data-атрибуты отображаются в объект без префиксов data- , из названий убираются знаки дефиса, а сами названия конвертируются в camelCase, например:

Имя атрибута	Имя в API набора данных
data-user	user
data-maxage	maxage
data-list-size	listSize

Наш новый код:

Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;

Данный API поддерживается всеми современными браузерами, но не IE10 и ниже. Для таких браузеров существует обходной путь , но, наверное, куда практичнее использовать jQuery, если вы пишете для старых браузеров.

HTML5 добавил возможность хранить данные напрямую в html коде. При этом эти данные не будут видны пользователю. Data-* attributes позволяет нам хранить дополнительные данные в любых html элементах, не засоряя имена классов.

HTML ситаксис

Синтаксис очень простой. Например, у вас есть статья и вы хотите хранить некоторую дополнительную информацию, которая не должна быть показана. Используя data-* attributes можно сделать так:

...

Из примера видно, что все data-* attributes записываются следующим образом:

«data-» + «name-parameter»

Доступ из JavaScript

Чтение данных из data-* attributes так же очень простое. Мы можем использовать getAttribute() для чтения, но по стандарту определен более простой способ, а именно через свойство dataset :

Var article = document.querySelector("#electriccars"); var data = article.dataset; // data.columns -> "3" // data.indexnumber -> "12314" // data.parent -> "cars"

Значением каждого свойства является строка, мы можем получать и изменять данное значение. Если мы напишем article.dataset.columns = 5 , то свойство data-columns изменится на 5.

CSS доступ

К data-* attributes мы можем так же просто получить доступ и через CSS . Например, чтобы получить data-parent атрибут статьи, вы можете использовать псевдоэлементы в CSS с attr() :

Article::before { content: attr(data-parent); }

Вы так же можете использовать селекторы в CSS , чтобы изменить стили в зависимости от значения data-* :

Article{ width: 400px; } article{ width: 600px; }

Посмотреть, как все это работать можно по ссылке .

Data attributes так может содержать изменяющуюся информацию, например, очки в игре. Используя CSS селекторы и доступ из JavaScript мы можем создавать классные эффекты без написания дополнительного кода для отображения. Смотрим видео . Ссылка на код .

Проблемы

Не храните данные в data-* attributes , которые должны быть показаны, так как вспомогательные технологии не могут получить к ним доступ. К тому же поисковые роботы не индексируют data-* attributes .

Печально, но IE не поддерживает dataset . Для чтения атрибутов необходимо использовать getAttribute() , для изменения значения setAttribute() .

Скорость чтения data-attributes намного ниже по сравнению с хранением этих данных в JS . Использование dataset работает даже медленнее, чем getAttribute() .