Введение статьи Wulin.com (www.vevb.com): реализация пользовательских атрибутов в HTML5 не является технически сложной. Реальная трудность заключается в том, подходит ли метод, который вы используете для вашего проекта; Если применимо, как сделать его более эффективным? Пожалуйста, помните, что еще слишком рано включать метод набора данных в качестве функции страницы, в конце концов, многие браузеры не поддерживают эту функцию.
Разработка HTML5 находится в полном разгаре, и использование пользовательских атрибутов в HTML5 постепенно набирает популярность среди разработчиков; Кроме того, это также играет важную роль в семантике веб -разработки. В этой статье мы рассмотрим создание и доступ к свойствам пользовательских данных HTML5, включая функции JavaScript, посредством практических примеров.
Прежде чем использовать HTML5, сначала добавьте пользовательские атрибуты в элемент HTML и обратитесь к нему через JavaScript. Если вы пробовали это раньше, вы обнаружите, что легко игнорировать проверку тегов, и HTML5 может предоставить вам функцию создания и использования ваших собственных атрибутов элемента на действительной веб -странице.
Создать файлы HTML5:
Если вы не выяснили, какой из них использовать, вы можете скопировать следующий код:
<! Doctype html>
<html>
<голова>
<Скрипт>
/*функционирует здесь*/
< /script>
< /head>
<тело>
< /body>
< /html>
Установите пользовательские элементы в корпусе и получайте доступ к ним, используя элементы JavaScript в части сценария головы.
Создать элементы:
Во -первых, добавьте несколько простых атрибутов контента и пользовательских атрибутов, а также элементы, такие как идентификаторы, чтобы мы могли распознать примеры JavaScript.
<div id = product1 data-product-category = одежда>
Хлопковая рубашка
</div>
Как вы можете видеть, пользовательский атрибут находится в форме: data-*, установите имя в разделе данных или в выбранном вами имени. Использование пользовательских свойств в HTML5 - единственный способ сделать это. Поэтому, если вы хотите проверить, что веб -страница действительна, вы можете использовать этот метод.
Конечно, детали проекта определяют, полезно ли для вас пользовательское свойство и как его назвать. Этот пример может быть применен к розничным сайтам в разных категориях продуктов.
Пользовательские свойства позволяют вам использовать код JavaScript на странице особым способом для установки элементов, таких как возможности отображения анимации. Если нет стандартных HTML -элементов, мы рекомендуем использовать пользовательские свойства.
Добавить кнопку тестирования
Событие может быть выполнено с использованием собственных элементов JavaScript на странице, при условии, что на странице добавляется следующий код:
<input type = кнопка значение = получить атрибут onclick = getElementattribute ('product1')/>
Получить атрибуты:
Наиболее распространенным способом доступа к свойствам в JavaScript является использование getattributes, что также является первым шагом, который нам нужно сделать. Добавьте следующую функцию в область скрипта головы страницы:
function getElementattribute (elemid) {
var theElement = document.getElementByid (elemid);
var theatTribute = theElement.getAttribute ('data-product-category');
предупреждение (TheatTribute);
}
Здесь мы добавили значение оповещения в пример, и, конечно, вы также можете добавить его в сценарий в соответствии с вашими потребностями.
Получите данные:
Вы можете использовать наборы данных элементов вместо DOM GetAttributes, что может быть более эффективным, особенно в некоторых случаях, когда код итерации итерации через несколько атрибутов, однако поддержка браузера для набора данных все еще очень низкая, поэтому помня об этом, этот код может выполнить тот же процесс, что и метод //, стоящий за ним.
// var theatTribute = theElement.getAttribute ('data-product-category'); var theatTribute = theElement.dataset.productcategory;
Удалить данные. В наборе данных, начиная с имени атрибута, он все еще включен в HTML.
Обратите внимание, что если у вас есть дефис в вашем пользовательском имени свойства, это займет форму верблюда при доступе к данным, то есть (Category-Category Data Category становится ProductCategory).
Другие модули и функции
Мы получили это свойство, и сценарий все еще может быть установлен и удален. Следующий код демонстрирует, как установить свойства с использованием стандартных модулей JavaScript и наборов данных.
Вы также можете использовать метод DOM или набор данных для удаления определенного атрибута:
// метод DOM
theelement.removeattribute ('Data-Product-Category');
// версия набора данных
theelement.dataset.productcategory = null;
Заключение:
Реализация пользовательских свойств в HTML5 не является технически сложной. Реальная трудность заключается в том, подходит ли метод, который вы используете для вашего проекта; Если так, как вы можете сделать это более эффективным? Пожалуйста, помните, что еще слишком рано включать метод набора данных в качестве функции страницы, в конце концов, многие браузеры не поддерживают эту функцию.