Что такое настраиваемые атрибуты в HTML5?

Настраиваемые атрибуты — это атрибуты, которые не являются частью стандартных атрибутов HTML5, но создаются явно. Они позволяют нам добавлять нашу собственную информацию в HTML-теги. Они не являются конкретными и могут использоваться со всеми элементами HTML. Дополнительная информация, хранящаяся с помощью настраиваемых атрибутов, — это данные, которые не должны иметь какого-либо определенного значения. Эти данные являются личными для страницы или приложения. Настраиваемые атрибуты также известны как атрибуты данных.

Любой атрибут, имя которого начинается с данных, является настраиваемым атрибутом. В data- * атрибуты позволяют нам внедренные пользовательские атрибуты на всех HTML — элементах. Они полностью игнорируются пользовательским агентом. Сохраненные данные можно использовать в JavaScript страницы. Мы также можем использовать эти атрибуты данных для стилизации наших элементов.

Синтаксис:

<element data-*="value">

Две части настраиваемых атрибутов:

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

Содержание

Пример 1
Пример 2
Пример 3

Пример 1

В этом примере мы прочитаем значения этих атрибутов с помощью JavaScript довольно просто. На самом деле есть несколько способов сделать это. Один из более простых способов — использовать getAttribute () и setAttribute (). getAttribute () можно использовать для получения сохраненных данных из атрибута. Он вернет либо пустую строку, либо пустую строку, если запрашиваемый атрибут не существует. setAttribute () может использоваться для изменения значения любого существующего атрибута или для добавления нового атрибута.

<!DOCTYPE html>

<html>

<head>

    <title>GeeksForGeeks</title>

</head>

<body>

    <h3>Welcome To GFG</h3>

    <ul>

        <li onclick="showPosition(this)"

            id="geek1" data-position="winner">

            Geek1

        </li>



        <li onclick="showPosition(this)"

            id="geek2" data-position="runner up">

            Geek2

        </li>



        <li onclick="showPosition(this)"

            id="geek3" data-position="third">

            Geek3

        </li>



        <li onclick="showPosition(this)"

            id="geek4" data-position="lost">

            Geek4

        </li>

    </ul>



    <script src="custom_attributes.js"></script>

</body>

</html>

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

function showPosition(runner) {

var position = runner.getAttribute("data-position");

alert("The " + runner.innerHTML + " is " + position + ".");

}

Пример 2

В этом примере мы увидим другой способ доступа к атрибутам данных — использование свойства набора данных. Это свойство возвращает объект DOMStringMap с одной записью для каждого настраиваемого атрибута данных. Ключ DOMStringMap — это преобразованная форма настраиваемого атрибута данных. Префикс «data-» удаляется из имени атрибута. Любой дефис в имени также удаляется. Таким образом, мы получаем имя camelCase. Затем к атрибутам можно получить доступ, используя имя camelCase, хранящееся в объекте в качестве ключа, например element.dataset.keyname или element.dataset [keyname]. Возьмем списки продуктов. Настраиваемые атрибуты будут содержать тип еды. Атрибут onclick запускает JavaScript при нажатии на элемент.

<!DOCTYPE html>

<html>

<head>

    <title>GeeksForGeeks</title>

</head>

<body>

    <h3>Welcome To GFG</h3>

    <ul>

        <li onclick="handleFood(this)"

            data-food-type="fruit">

            Apple

        </li>



        <li onclick="handleFood(this)"

            data-food-type="vegitable">

            Potato

        </li>



        <li onclick="handleFood(this)"

            data-food-type="veg">

            Cabbage

        </li>



        <li onclick="handleFood(this)"

            data-food-type="non-veg">

            Chicken

        </li>

    </ul>



    <script src="custom_attributes.js"></script>

</body>

</html>

custom_attributes.js: при каждом щелчке по элементу запускается этот фрагмент кода. Здесь мы будем предупреждать о типе еды, которая хранится в настраиваемом атрибуте, с помощью свойства набора данных. Фрагмент кода выглядит так:

function handleFood(food) {

var foodType = food.dataset.foodType;

alert(food.innerHTML + " is " + foodType +".");

}

Пример 3

В этом примере мы установим цвета фона элементов, используя CSS-доступ, который мы только что видели. Поскольку настраиваемые атрибуты представляют собой простые атрибуты HTML, к ним можно получить доступ из CSS. Например, мы можем использовать селекторы атрибутов для стилизации цвета фона элемента.

<!DOCTYPE html>

<html>

<head>

    <title>Page Title</title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>

    <h2>Welcome To GFG</h2>

    <p data-about="blog">Informational text enteries</p>

    <p data-info="blogathon">Blogathon 2021</p>

</body>

</html>