DevGang
Авторизоваться

Полное руководство по data атрибутам 

Элементы HTML могут иметь атрибуты, которые используются для чего угодно, от информации о доступности до стилистического контроля.

Что не рекомендуется это составление собственных атрибутов или перепрофилирования существующих атрибутов для несвязанного функциональности.


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

Хорошая новость: вы можете создать свои собственные атрибуты. Вам просто нужно добавить к ним префикс, data-* и тогда вы сможете делать то, что вам нравится!

Синтаксис

Может быть очень удобно иметь возможность создавать свои собственные атрибуты HTML и помещать в них свою собственную информацию. К счастью, вы можете это сделать с data атрибутами:


  • Атрибуты данных часто называют data-* атрибутами, так как они всегда отформатированы таким образом: слово data, затем тире -, затем другой текст, который вы можете составить.

    Можете ли вы использовать один атрибут data?

    Вероятно, это не повредит, но вы не получите JavaScript API, о котором мы расскажем позже в этом руководстве. По сути, вы создаете для себя атрибут, который, как я уже упоминал во вступлении, не рекомендуется.

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

    Хранить контент, который должен быть доступен. Если контент должен просматриваться или читаться на странице, помещайте его не только в data атрибут, но и в HTML-контент.

    
    
    Chris Coyier

    Стилизация с атрибутами данных

    CSS может выбирать элементы HTML на основе атрибутов и их значений.

    /* Select any element with this data attribute and value */
    [data-size="large"] {
      padding: 2rem;
      font-size: 125%;
    }
    
    /* You can scope it to an element or class or anything else */
    button[data-type="download"] { }
    .card[data-pad="extra"] { }
    

    Это может быть убедительным. Преобладающими хуками стилей в HTML / CSS являются классы, и хотя классы хороши (они имеют среднюю специфичность и хорошие методы JavaScript через classList), у элемента либо есть, либо нет (по сути, он включен или выключен ). С data-* атрибутами вы получаете эту способность включения / выключения плюс возможность выбирать на основе значения, которое оно имеет на том же уровне специфичности.

    /* Selects if the attribute is present at all */
    [data-size] { }
    
    /* Selects if the attribute has a particular value */
    [data-state="open"],
    [aria-expanded="true"] { }
    
    /* "Starts with" selector, meaning this would match "3" or anything starting with 3, like "3.14" */
    [data-version^="3"] { }
    
    /* "Contains" meaning if the value has the string anywhere inside it */
    [data-company*="google"] { }
    

    Специфика выбора атрибутов

    Это точно так же, как класс. Мы часто думаем о специфике как о значении из четырех частей:

    встроенный стиль, идентификаторы, классы / атрибуты, теги

    Таким образом, один селектор атрибута равен 0, 0, 1, 0. Данный селектор:

    div.card[data-foo="bar"] { }
    

    ... будет 0, 0, 2, 1. 

    2 - потому что есть один class (.card) и один attribute ([data-foo="bar"]), а 1 - потому что есть один tag (div).

    Селекторы атрибутов имеют меньшую специфичность, чем идентификатор, больше, чем элемент / тег, и такие же, как класс.

    Значения атрибутов без учета регистра

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

    /* Will match
    
    */ [data-state="open" i] { }

    Использование атрибутов данных для визуализации

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

    /* 
    */ [data-emoji]::before { content: attr(data-emoji); /* Returns '✅' */ margin-right: 5px; }

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

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

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

    Как и любой другой атрибут, вы можете получить доступ к значению с помощью универсального метода getAttribute.

    let value = el.getAttribute("data-state");
    
    // You can set the value as well.
    // Returns data-state="collapsed"
    el.setAttribute("data-state", "collapsed");
    

    Но атрибуты данных также имеют свой собственный API. Допустим, у вас есть элемент с несколькими атрибутами данных (что вполне нормально):

    
    

    Если у вас есть ссылка на этот элемент, вы можете установить и получить такие атрибуты, как:

    // Get
    span.dataset.info; // 123
    span.dataset.index; // 2
    
    // Set
    span.dataset.prefix = "Mr. ";
    span.dataset.emojiIcon = "🎪";
    

    Обратите внимание на использование camelCase в последней строке. Он автоматически преобразует атрибуты стиля kebab в HTML, например data-this-little-piggy, в стиль camelCase в JavaScript будет dataThisLittlePiggy.

    Этот API, возможно, не так хорошо , как classList с четкими методами add, remove, toggle и replace, но это лучше, чем ничего.

    У вас также есть доступ к встроенным наборам данных:

    
    
    

    Данные JSON внутри атрибутов данных

    Эй, а почему бы и нет? Это просто строка, и ее можно отформатировать как допустимый JSON (обратите внимание на кавычки и тому подобное). Вы можете восстановить эти данные и проанализировать их при необходимости.

    const el = document.querySelector("li");
    
    let json = el.dataset.person;
    let data = JSON.parse(json);
    
    console.log(data.name); // Chris Coyier
    console.log(data.job); // Web Person
    

    Сценарии использования JavaScript

    Концепция заключается в том, что вы можете использовать атрибуты данных для помещения в HTML информации, которая может понадобиться JavaScript для выполнения определенных задач.

    Обычный пример связан с функциональностью базы данных. Скажем, у вас есть кнопка «Like»:

    
    

    У этой кнопки может быть обработчик кликов, который выполняет Ajax-запрос к серверу, чтобы увеличить количество лайков в базе данных при клике. Он знает, какую запись обновлять, поскольку получает ее из атрибута данных.

    Источник:

    #JavaScript #CSS #HTML
    Комментарии
    Чтобы оставить комментарий, необходимо авторизоваться

    Присоединяйся в тусовку

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

    Попробовать

    Напиши статью и выиграй годовую подписку на Яндекс плюс или лицензию от Jet Brains

    Участвовать