Комментарий: HTML5 добавил новую функцию в пользовательские атрибуты данных, то есть Data-* Пользовательские атрибуты. В HTML5 мы можем использовать префикс с данными- чтобы установить пользовательские свойства, необходимые нам для хранения некоторых данных
Конечно, в продвинутых браузерах вы можете определить и получить доступ к данным с помощью сценариев. Очень полезно в проектной практике.
Например:
Используйте метод атрибута для доступа к значению атрибута Data-*
Очень удобно использовать метод атрибутов для доступа к значению атрибута данных-* Пользовательский атрибут:
// Использовать getAttribute, чтобы получить атрибут данных
var user = документ. getElementbyId («Пользователь»);
var username = plant. getAttribute ('data-Uname'); // username = 'Сценарий' Дом '
var userid = plant. getAttribute ('data-uid'); // userId = '12345'
// Использовать SetAttribute для установки данных о данных
пользователь . setAttribute ('Data-Site', 'http://www.vevb.com');
Этот метод отлично работает во всех современных браузерах, но это не пользовательский атрибут данных HTML 5, который используется для использования, в противном случае он не будет отличаться от пользовательских атрибутов, которые мы использовали ранее, например:
<div id = "user" uid = "12345" uname = "script House"> </div>
<Скрипт>
// Использовать getAttribute, чтобы получить атрибут данных
var user = документ. getElementbyId («Пользователь»);
var username = plant. getAttribute ('uname'); // username = 'Сценарий' Дом '
var userid = plant. getAttribute ('uid'); // userId = '12345'
// Использовать SetAttribute для установки данных о данных
пользователь . setAttribute ('site', 'http://www.vevb.com');
</script>
Этот «исходный» пользовательский атрибут ничем не отличается от приведенного выше атрибута Data-*, и имена атрибутов знания разные.
Атрибут набора данных обращается к значению Data-* Пользовательский атрибут
Таким образом, обращается к значению атрибута набора данных атрибута Data-* Пользовательским атрибутом, получив атрибут набора данных элемента. Это свойство набора данных является частью API HTML5 JavaScript и используется для возврата объекта DomstringMap со всеми атрибутами данных выбранных элементов.
При использовании этого метода, вместо использования полного имени атрибута, например, Data-UID, следует удалить префикс данных.
Другое особое примечание: если имя данного атрибута содержит дефис, например: дата данных о данных, дефис будет удален и преобразован в именование, подобное верблюдам. Предыдущее имя атрибута должно быть преобразовано: DateOfbirth.
<div Data-id = "1234567890" Data-name = "Data House" Data-Date-of Birth> Дверь </div>
<script type = "text/javascript">
var el = document.queryselector ('#user');
console.log (el.id); // 'пользователь'
console.log (el.dataset); // domstringmap
console.log (el.dataset.id); // '1234567890'
console.log (el.dataset.name); // 'Сценарий дома'
console.log (el.dataset.dateofbirth); // ''
el.dataset.dateofbirth = '1985-01-05'; // Установить значение данных о данных.
console.log ('nomedataattr' в el.dataset); // false
el.dataset.somedataattr = 'mydata';
console.log ('nomedataattr' в el.dataset); // true
</script>
Если вы хотите удалить Property, вы можете сделать это: DELETE EL. набор данных. идентификатор ; или эль .dataset. id = null; Полем
Он выглядит красиво, ха -ха, но, к сожалению, новый атрибут набора данных реализован только в Chrome 8+ Firefox (Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+ браузеры, поэтому лучше всего использовать и Setattribute для работы в течение этого периода.
О селекторе данных
В реальной разработке вы можете найти его полезным, вы можете выбрать связанные элементы на основе вашего пользовательского атрибута данных. Например, используйте QuerySelectorall, чтобы выбрать элементы:
// Выберите все элементы, содержащие атрибут «расцветающий данные»
документ QuerySelectorall ('[[Цеточный данных]');
// Выберите все элементы со значением атрибута «Целью данных»
документ queryselectorall ('[data-text-color = "red"]');
Точно так же мы также можем установить стили CSS для соответствующих элементов с помощью значения атрибута данных, например, следующий пример:
<стиль типа = "text/css">
.пользователь {
Ширина: 256px;
Высота: 200px;
}
.user [data-name = 'feiwen'] {
Цвет: коричневый
}
.user [data-name = 'css'] {
Цвет: красный
}
</style>
<div class = "user" data-id = "123" data-name = "feiwen"> 1 </div>
<div class = "user" data-id = "124" data-name = "css"> pier </div>