Раньше не было возможностей хранить произвольные данные, относящиеся к DOM.
В HTML5 появились пользовательские атрибуты. Вы можете использовать любое имя в нижнем регистре с префиксом data-, например:
<div id="msglist" data-user="murzik" data-list-size="5" data-age="7"></div>
Помимо префикса data- в именах пользовательских data-атрибутов могут встречаться буквы, цифры, тире (-), точка (.), двоеточие (:) и нижнее подчёркивание (_). Заглавных букв в имени быть не должно.
Пользовательские data-атрибуты являются строками - в них вы можете хранить любую информацию, в том числе и JSON. Атрибуты должны использоваться в тех случаях, когда нет подходящих элементов HTML5 или атрибутов. У одного элемента может быть сколько угодно много data-атрибутов с самыми различными значениями.
Приведение типов должно осуществляться с помощью JavaScript.
const maxLength = Number(element.dataset.maxLength);
Браузеры позволяют получить и изменить data-атрибуты с использованием методов getAttribute() и setAttribute():
var msglist = document.getElementById("msglist");
var show = msglist.getAttribute("data-list-size");
msglist.setAttribute("data-list-size", +show+3);
Это код для старых браузеров.
В библиотеке jQuery (+1.6) есть метод 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.
Eсть API для работы с наборами данных HTML5. Свойство dataset возвращает объект DOMStringMap. Необходимо помнить, что data-атрибуты отображаются в объекте без префиксов data-, из названий убираются знаки дефиса, а сами названия конвертируются в camelCase:
data-user -> user
data-age -> maxage
data-list-size -> listSize
Код для доступа к атрибутам.
var msglist = document.getElementById("msglist");
var show = msglist.dataset.listSize;
msglist.dataset.listSize = +show+3;
Новый API поддерживается всеми современными браузерами.
Указав для тега уникальный data-атрибут, можно обратиться к нему в стилях.
<div data-css="css'</div>
div[data-css='css']{}