data в HTML


Содержание

Атрибуты и свойства

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

Например, для такого тега у DOM-объекта будет такое свойство body. .

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

DOM-свойства

Ранее мы уже видели встроенные DOM-свойства. Их много. Но технически нас никто не ограничивает, и если этого мало – мы можем добавить своё собственное свойство.

DOM-узлы – это обычные объекты JavaScript. Мы можем их изменять.

Например, создадим новое свойство для document.body :

Мы можем добавить и метод:

Также можно изменять встроенные прототипы, такие как Element.prototype и добавлять новые методы ко всем элементам:

Итак, DOM-свойства и методы ведут себя так же, как и обычные объекты JavaScript:

  • Им можно присвоить любое значение.
  • Они регистрозависимы (нужно писать elem.nodeType , не elem.NoDeTyPe ).

HTML-атрибуты

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

Таким образом, когда у элемента есть id или другой стандартный атрибут, создаётся соответствующее свойство. Но этого не происходит, если атрибут нестандартный.

Пожалуйста, учтите, что стандартный атрибут для одного тега может быть нестандартным для другого. Например, атрибут «type» является стандартным для элемента (HTMLInputElement), но не является стандартным для (HTMLBodyElement). Стандартные атрибуты описаны в спецификации для соответствующего класса элемента.

Мы можем увидеть это на примере ниже:

Таким образом, для нестандартных атрибутов не будет соответствующих DOM-свойств. Есть ли способ получить такие атрибуты?

Конечно. Все атрибуты доступны с помощью следующих методов:

  • elem.hasAttribute(name) – проверяет наличие атрибута.
  • elem.getAttribute(name) – получает значение атрибута.
  • elem.setAttribute(name, value) – устанавливает значение атрибута.
  • elem.removeAttribute(name) – удаляет атрибут.

Этим методы работают именно с тем, что написано в HTML.

Кроме этого, получить все атрибуты элемента можно с помощью свойства elem.attributes : коллекция объектов, которая принадлежит ко встроенному классу Attr со свойствами name и value .

Вот демонстрация чтения нестандартного свойства:

У HTML-атрибутов есть следующие особенности:

  • Их имена регистронезависимы ( id то же самое, что и ID ).
  • Их значения всегда являются строками.

Расширенная демонстрация работы с атрибутами:

Пожалуйста, обратите внимание:

  1. getAttribute(‘About’) – здесь первая буква заглавная, а в HTML – строчная. Но это не важно: имена атрибутов регистронезависимы.
  2. Мы можем присвоить что угодно атрибуту, но это станет строкой. Поэтому в этой строчке мы получаем значение «123» .
  3. Все атрибуты, в том числе те, которые мы установили, видны в outerHTML .
  4. Коллекция attributes является перебираемой. В ней есть все атрибуты элемента (стандартные и нестандартные) в виде объектов со свойствами name и value .

Синхронизация между атрибутами и свойствами

Когда стандартный атрибут изменяется, соответствующее свойство автоматически обновляется. Это работает и в обратную сторону (за некоторыми исключениями).

В примере ниже id модифицируется как атрибут, и можно увидеть, что свойство также изменено. То же самое работает и в обратную сторону:

Но есть и исключения, например, input.value синхронизируется только в одну сторону – атрибут → значение, но не в обратную:

  • Изменение атрибута value обновило свойство.
  • Но изменение свойства не повлияло на атрибут.

Иногда эта «особенность» может пригодиться, потому что действия пользователя могут приводить к изменениям value , и если после этого мы захотим восстановить «оригинальное» значение из HTML, оно будет в атрибуте.

DOM-свойства типизированы

DOM-свойства не всегда являются строками. Например, свойство input.checked (для чекбоксов) имеет логический тип:

Есть и другие примеры. Атрибут style – строка, но свойство style является объектом:

Хотя большинство свойств, всё же, строки.

При этом некоторые из них, хоть и строки, могут отличаться от атрибутов. Например, DOM-свойство href всегда содержит полный URL, даже если атрибут содержит относительный URL или просто #hash .

Если же нужно значение href или любого другого атрибута в точности, как оно записано в HTML, можно воспользоваться getAttribute .

Нестандартные атрибуты, dataset

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

Иногда нестандартные атрибуты используются для передачи пользовательских данных из HTML в JavaScript, или чтобы «помечать» HTML-элементы для JavaScript.

Также они могут быть использованы, чтобы стилизовать элементы.

Например, здесь для состояния заказа используется атрибут order-state :

Почему атрибут может быть предпочтительнее таких классов, как .order-state-new , .order-state-pending , order-state-canceled ?

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

Но с пользовательскими атрибутами могут возникнуть проблемы. Что если мы используем нестандартный атрибут для наших целей, а позже он появится в стандарте и будет выполнять какую-то функцию? Язык HTML живой, он растёт, появляется больше атрибутов, чтобы удовлетворить потребности разработчиков. В этом случае могут возникнуть неожиданные эффекты.


Чтобы избежать конфликтов, существуют атрибуты вида data-*.

Все атрибуты, начинающиеся с префикса «data-», зарезервированы для использования программистами. Они доступны в свойстве dataset .

Например, если у elem есть атрибут «data-about» , то обратиться к нему можно как elem.dataset.about .

Атрибуты, состоящие из нескольких слов, к примеру data-order-state , становятся свойствами, записанными с помощью верблюжьей нотации: dataset.orderState .

Вот переписанный пример «состояния заказа»:

Использование data-* атрибутов – валидный, безопасный способ передачи пользовательских данных.

Пожалуйста, примите во внимание, что мы можем не только читать, но и изменять data-атрибуты. Тогда CSS обновит представление соответствующим образом: в примере выше последняя строка (*) меняет цвет на синий.

Итого

  • Атрибуты – это то, что написано в HTML.
  • Свойства – это то, что находится в DOM-объектах.
Свойства Атрибуты
Тип Любое значение, стандартные свойства имеют типы, описанные в спецификации Строка
Имя Имя регистрозависимо Имя регистронезависимо

Методы для работы с атрибутами:

  • elem.hasAttribute(name) – проверить на наличие.
  • elem.getAttribute(name) – получить значение.
  • elem.setAttribute(name, value) – установить значение.
  • elem.removeAttribute(name) – удалить атрибут.
  • elem.attributes – это коллекция всех атрибутов.

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

  • Нужен нестандартный атрибут. Но если он начинается с data- , тогда нужно использовать dataset .
  • Мы хотим получить именно то значение, которое написано в HTML. Значение DOM-свойства может быть другим, например, свойство href – всегда полный URL, а нам может понадобиться получить «оригинальное» значение.

Задачи

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

Напишите код для выбора элемента с атрибутом data-widget-name из документа и прочитайте его значение.

в HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Фильтрация

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

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

Стилизация

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

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

Настройка


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

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

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

Я привел несколько широко распространенных примеров использования дата атрибутов. Хотите продемонстрировать другие способы их применения? Использовали их раньше и хотите поделиться опытом? Оставляйте свои комментарии!

jQuery — Data

Статья, в которой рассмотрим, какие в jQuery существуют методы для работы с data-атрибутами и внутренним хранилищем Data.

Назначение HTML 5 data-атрибутов

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

Работа с data-атрибутами посредством методов attr и removeAttr

Выполнение действий над атрибутами data в jQuery обычно осуществляется с помощью методов: attr и removeAttr .

Например, выведем значение data-атрибутов элемента div с в консоль браузера:

Данный метод (attr) возвращает значение data-атрибута в виде строки.

Например, добавим атрибут data-year к вышеприведённому элементу:

Более детально разобраться, как работать с данными методами можно в статье jQuery — Работа с атрибутами HTML элементов.

jQuery — data-атрибуты и метод data

Метод data используется в jQuery не для общения с data-атрибутами. Его основное предназначение — это чтение данных из внутреннего хранилища jQuery ( $.cache ) или запись в него некоторой информации.

Внутреннее хранилище jQuery — это некий контейнер, в который можно помещать произвольную информацию, связанную с определённым DOM-элементом текущей страницы.

Но, тем не менее, данный метод может выполнять чтение HTML5 data-атрибутов, и помещать их во внутреннее хранилище. Это случается только в том случае, если в хранилище jQuery нет ключа с именем, равным имени data-атрибута. В противном случае вы получите значение из хранилища $.cache .

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

Пример, в котором рассмотрим, как метод data работает с data-атрибутом:

В методе data ключ соответствует имени data-атрибута без приставки data- .

Кроме этого, если в окончании имени data-атрибута (после data- ) содержится дефисы («-«), то при обращении к нему с помощью метода data буквы стоящие перед дефисом должны быть заменены на заглавные, а сами дефисы убраны. Например, имя атрибута data-last-name должно быть указано в методе data как lastName .

Ещё один момент при работе с методом data заключается в том, что когда jQuery разбирает значение data-атрибута, то он пытается привести его значение (строку) к соответствующему типу JavaScript (булевскому значению, числу, объекту, массиву или null ). Например, значение «420» преобразуется в число 420. Если значение data-атрибута является объектом (начинается с » < ") или массивом (начинается с " [ "), то jQuery использует для разбора значения метод parseJSON . Это означает то, что содержимое атрибута должно иметь валидный JSON синтаксис (включая указания имен свойств в двойных кавычках). Но если попытка разобрать значение data-атрибута окажется не удачной, то оно останется в исходном в виде (т.е. в виде строки).

В итоге, метод data используется для выполнения следующих операций (в зависимости от указанных аргументов):

1. Получение значения ключа, связанного с элементом, из внутреннего хранилища jQuery:

Данный вариант метода data выполняет одно из следующих действий:

  • Чтение data-атрибута (имя которого соответствует указанному ключу) у первого элемента текущего набора, помещение его в хранилище, и возвращение значение этого ключа в качестве результата. Данное действие данный метод выполняет только в том случае, если у элемента есть data-элемент соответствующий ключу и в контейнере $.cache у данного элемента нет записи с указанным ключом.
  • Получает значение указанного ключа из хранилища jQuery. Это действие метод data выполняет только в том случае, если в $.cache у элемента есть указанный ключ.
  • возвращает значение undefined или пустой объект, если ни одно из вышеперечисленных действий не выполняется.

Если в результате выборки $(‘селектор’) возвращается несколько элементов, то данный метод возвращает значение только для первого элемента из полученного набора.

2. Получение всех данных в виде объекта JavaScript из хранилища jQuery, связанных с указанным элементом:

Более детально этот вариант метода data осуществляет следующее:

  1. Автоматически помещает data-атрибуты во внутреннее хранилище jQuery. Это действие он выполняет только для тех data-атрибутов, имён (ключей) которых нет на текущий момент в хранилище jQuery.
  2. Возвращает объект, состоящий из пар ключ-значение, связанных с текущим элементом.

3. Метод data применяют не только для чтения значений, но и для записи данных (ключ-значение), ассоциированных с некоторым элементом DOM во внутреннее хранилище jQuery.

Пример работы с методом data :

Методы для работы с data-хранилищем jQuery

Рассмотрим, какие ещё есть методы в jQuery для работы с data хранилищем кроме data .

Метод removeData

Данный метод предназначен для удаления данных, связанных с определённым элементом, из внутреннего хранилища jQuery. Данный метод не работает с data-атрибутами, поэтому все соответствующие ключу data-атрибуты удалены не будут.

Синтаксис метода removeData :

Удалим несколько пар ключ-значений, ассоциированных с элементом с из хранилища jQuery:

Функция $.data()

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

Данная функция предназначена только для работы с jQuery хранилищем и в отличие от метода $(‘селектор’).data() не извлекает данные из HTML 5 data-атрибутов.

Синтаксис функции jQuery.data() :

Пример использования функции $.data() для сохранения информации, связанной с определённым DOM-элементом, в хранилище jQuery:

Функция $.hasData()

Эта функция определяет, имеет ли элемент, какие-либо данные во внутреннем хранилище jQuery.

Функция hasData возвращает true , если в хранилище есть какие-либо данные связанные с указанным элементом. В противном случае данная функция возвращает false .

Внутреннее хранилище $.cache используется также самой библиотекой jQuery. Один из примеров — это использование его для хранения кода обработчиков событий jQuery.

Пример использования функции hasData :

Разобраться, как работать в jQuery с data-атрибутами, которые появились в спецификации языка HTML5, можно в статье «jQuery – Методы attr и removeAttr». Эти методы ( attr и removeAttr ) используются не только для управления data-атрибутами, но и любых других атрибутов HTML элементов.

HTML глобальный атрибут data-*


Определение и применение

Глобальный атрибут data-* используется для хранения пользовательских данных (возможность вставить атрибут с пользовательскими данными к любому HTML элементу). Данный атрибут даёт возможность, используя JavaScript предоставить более расширенные возможности для пользователя, не прибегая к запросам на стороне сервера.

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

Поддержка браузерами и значения атрибута

Значение Chrome Firefox Opera Safari IExplorer Edge
value 4.0 2.0 9.6 3.1 5.5 12.0

Пример использования

Кликни по элементу для подробной информации:

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Что такое пользовательские атрибуты данных (data) в HTML5 и как их использовать

Сегодняшняя статья посвящена рассмотрению новшества в HTML5 – пользовательских атрибутов данных (data). Вы узнаете, что такое атрибуты data , зачем они нужны, и как их можно использовать.

Зачем нужны пользовательские атрибуты данных?

Очень часто разработчикам нужно хранить определенную информацию, связанную с различными элементами DOM. Зачастую такая информация больше нужна именно программистам, а не посетителям сайта. Допустим, вам нужно определять тип блока DOM ( section , footer и т.д.) и присваивать ему идентификатор, чтобы позднее добавлять к нему определенные CSS стили.

Это легко можно сделать и с помощью атрибутов id или class . Но, иногда, такого решения мало. Ввиду следующих ограничений:

  • Атрибут class не предназначен для хранения расширенных данных. Его основная цель – присваивать CSS стили определенному набору элементов.
  • Если нам нужен дополнительный объем информации, мы вынуждены добавлять новый класс к элементу. Это может затруднять синтаксический анализ данных в JavaScript.
  • Если имя класса начинается с цифр, позже это затруднит присвоение стилей, поскольку придется либо экранировать числа, либо использовать другие селекторы атрибутов в таблице стилей.

Чтобы решить эти задачи, в HTML5 были введены пользовательские атрибуты данных. Все атрибуты элемента, название которого начинается с data- , являются атрибутами данных. Эти атрибуты данных можно использовать и для присвоения стилей элементам DOM.

Синтаксис пользовательских атрибутов данных в HTML5

Название атрибута данных всегда начинается с data- . Например:

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

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

  • Во-первых, данные, хранящиеся в этих атрибутах, должны иметь тип string . Все, что может быть закодировано в виде строки, также может храниться в атрибутах данных. Если нужно выполнить преобразование типов, используйте для этого JavaScript.
  • Во-вторых, атрибуты данных должны использоваться только тогда, когда нет других соответствующих HTML-элементов или атрибутов. Например, неуместно хранить класс элемента в атрибуте data-class .
  • В-третьих, элемент может содержать любое количество атрибутов данных с любым допустимым значением.

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

Доступ к атрибутам данных в CSS

Вы можете использовать атрибуты данных в CSS для стилизации элементов с помощью селекторов атрибутов. Вы также можете показать информацию, хранящуюся в атрибуте данных, пользователям (во всплывающей подсказке или другим способом) с помощью функции attr() jQuery.

Если взять пример с типами блоков, вы можете по-разному стилизовать их фоновый цвет. Пример селектора в CSS:

Создание всплывающих подсказок с атрибутом data

Вы можете использовать всплывающие подсказки, чтобы показать пользователям некоторую дополнительную информацию, связанную с элементом. Информация, которую вы хотите показать, может храниться в атрибуте data-tooltip .

Затем вы можете показывать эти данные пользователю с помощью псевдоэлемента ::before .

Доступ к атрибутам данных с помощью JavaScript

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

Способ №1: Использование getAttribute и setAttribute

Метод getAttribute возвращает либо пустое значение ( null ), либо пустую строку, если данный атрибут не существует. Вот пример использования этого метода:

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

Способ №2: Использование jQuery

Вы также можете использовать метод jQuery data() для доступа к атрибутам данных элемента. До версии jQuery 1.6 использовался следующий код для доступа к атрибутам данных:

Начиная с версии jQuery 1.6 используется версия атрибутов данных в формате camelCase (ВерблюжийРегистр). Теперь вы можете сделать то же самое, используя следующий код:

Краткий итог

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

Атрибут data

Здравствуйте уважаемые начинающие веб-мастера. Продолжаем тему элементы HTML.

Атрибут с префиксом data это пользовательский атрибут, которому можно дать любое имя, и поместить в любом html теге.

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

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

В код ссылки — описание того места, куда эта ссылка ведёт.

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

Однако, data атрибут можно применить для создания очень интересных эффектов на странице.

И вот один такой пример. Попробуйте навести курсор на следующий абзац.

Вот эти «Ещё два привета» и есть текст расположенный в атрибуте data.

Забегая чуть вперёд, привожу код этого эффекта.

CSS
Делаем позиционирование и выплывание.


Более интересное применение атрибута data можно посмотреть в статье Текст на изображениях, но сперва придётся познакомиться с CSS.

Общий HTML атрибут >

Атрибут id определяет уникальный идентификатор HTML элемента (его значение должно быть уникально для всего HTML документа).

Чаще всего атрибут id используется в качестве селектора для определения стиля элемента в каскадной таблице стилей (CSS), а также в скриптах JavaScript для манипулирования элементом с определенным идентификатором.

В HTML5 атрибут id можно использовать с любым HTML элементом (все элементы с этим атрибутом будут проходить валидацию. Тем не менее, это не всегда имеет смысл!).

В HTML 4.01 атрибут id нельзя использовать с элементами , , , ,

Каковы все различия между атрибутами src и data-src?

Каковы различия и последствия (как хорошие, так и плохие) использования атрибута data-src или src тега img ? Могу ли я достичь одинаковых результатов, используя оба? Если да, то когда следует использовать каждый из них?

5 ответов

Атрибуты src и data-src имеют ничего общего, за исключением того, что они оба разрешены HTML5 CR, и они оба содержат буквы src . Все остальное отличается.

Атрибут src определен в спецификациях HTML и имеет функциональное значение.

Атрибут data-src — это только один из бесконечного набора атрибутов data-* , которые не имеют определенного значения, но могут использоваться для включения невидимых данных в элемент для использования в сценариях (или стилях).

Если вы хотите, чтобы изображение загружалось и отображало определенное изображение, используйте .src для загрузки URL-адреса этого изображения.

Если вам нужен фрагмент метаданных (по любому тегу), который может содержать URL-адрес, используйте data-src или любой data-xxx который вы хотите выбрать.

Пример src для тега изображения, где изображение загружает JPEG для вас и отображает его:

Пример ‘data-src’ для тега без изображения, где изображение еще не загружено — это просто часть метаданных тега div:

Пример data-src для тега изображения, используемого в качестве места для хранения URL альтернативного изображения:

Что такое пользовательские атрибуты данных (data) в HTML5 и как их использовать

Сегодняшняя статья посвящена рассмотрению новшества в HTML5 – пользовательских атрибутов данных (data). Вы узнаете, что такое атрибуты data , зачем они нужны, и как их можно использовать.

Зачем нужны пользовательские атрибуты данных?

Очень часто разработчикам нужно хранить определенную информацию, связанную с различными элементами DOM. Зачастую такая информация больше нужна именно программистам, а не посетителям сайта. Допустим, вам нужно определять тип блока DOM ( section , footer и т.д.) и присваивать ему идентификатор, чтобы позднее добавлять к нему определенные CSS стили.

Это легко можно сделать и с помощью атрибутов id или class . Но, иногда, такого решения мало. Ввиду следующих ограничений:

  • Атрибут class не предназначен для хранения расширенных данных. Его основная цель – присваивать CSS стили определенному набору элементов.
  • Если нам нужен дополнительный объем информации, мы вынуждены добавлять новый класс к элементу. Это может затруднять синтаксический анализ данных в JavaScript.
  • Если имя класса начинается с цифр, позже это затруднит присвоение стилей, поскольку придется либо экранировать числа, либо использовать другие селекторы атрибутов в таблице стилей.

Чтобы решить эти задачи, в HTML5 были введены пользовательские атрибуты данных. Все атрибуты элемента, название которого начинается с data- , являются атрибутами данных. Эти атрибуты данных можно использовать и для присвоения стилей элементам DOM.

Синтаксис пользовательских атрибутов данных в HTML5

Название атрибута данных всегда начинается с data- . Например:

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

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

  • Во-первых, данные, хранящиеся в этих атрибутах, должны иметь тип string . Все, что может быть закодировано в виде строки, также может храниться в атрибутах данных. Если нужно выполнить преобразование типов, используйте для этого JavaScript.
  • Во-вторых, атрибуты данных должны использоваться только тогда, когда нет других соответствующих HTML-элементов или атрибутов. Например, неуместно хранить класс элемента в атрибуте data-class .
  • В-третьих, элемент может содержать любое количество атрибутов данных с любым допустимым значением.

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

Доступ к атрибутам данных в CSS

Вы можете использовать атрибуты данных в CSS для стилизации элементов с помощью селекторов атрибутов. Вы также можете показать информацию, хранящуюся в атрибуте данных, пользователям (во всплывающей подсказке или другим способом) с помощью функции attr() jQuery.

Если взять пример с типами блоков, вы можете по-разному стилизовать их фоновый цвет. Пример селектора в CSS:

Создание всплывающих подсказок с атрибутом data

Вы можете использовать всплывающие подсказки, чтобы показать пользователям некоторую дополнительную информацию, связанную с элементом. Информация, которую вы хотите показать, может храниться в атрибуте data-tooltip .

Затем вы можете показывать эти данные пользователю с помощью псевдоэлемента ::before .

Доступ к атрибутам данных с помощью JavaScript

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

Способ №1: Использование getAttribute и setAttribute

Метод getAttribute возвращает либо пустое значение ( null ), либо пустую строку, если данный атрибут не существует. Вот пример использования этого метода:

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

Способ №2: Использование jQuery

Вы также можете использовать метод jQuery data() для доступа к атрибутам данных элемента. До версии jQuery 1.6 использовался следующий код для доступа к атрибутам данных:

Начиная с версии jQuery 1.6 используется версия атрибутов данных в формате camelCase (ВерблюжийРегистр). Теперь вы можете сделать то же самое, используя следующий код:

Краткий итог

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

Что такое dataset? Привязка данных к элементам через data-атрибуты без jQuery.

Все атрибуты, название которых начинается с data- , валидны, согласно спецификации HTML5, и предназначены для привязки некого набора пользовательских данных к html-элементу.

Вы, наверняка, пользовались jQuery и знаете, как работает метод .data()

Свойство dataset появилось совсем недавно (спецификация) и выполняет такую же роль, только без jQuery. Оно позволяет из javascript получить доступ в режиме чтения и записи к атрибутам data-* , установленным для html-элемента.

Устанавливаемое значение поля dataset автоматически синхронизируется с html атрибутом соответствущего элемента.

Как и в случае с jQuery, название html-атрибута в форме data-one-two-three соответствует свойству dataset.oneTwoThree . Вот несколько примеров:

Несмотря на то, что dataset довольно молод, у него все очень неплохо с поддержкой браузерами:

Если же Вам необходимы ранние версии IE, обратите внимание на этот полифил

Илон Маск рекомендует:  TReplaceFlags - Тип Delphi
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL