Ответ
Data-атрибуты (data-*) позволяют хранить дополнительную информацию в HTML-элементах без использования нестандартных атрибутов или дополнительных свойств в JavaScript. Они полезны для:
- Хранения данных – можно привязать данные к элементу, не влияя на его отображение или семантику.
- Доступа через JS/CSS – легко получать и изменять значения через JavaScript (
dataset) или даже использовать в CSS.
<div id="user" data-user-id="123" data-role="admin">User Info</div>const userElement = document.getElementById('user');
console.log(userElement.dataset.userId); // "123"Пример в CSS:
[data-role="admin"] {
color: red;
}Используются для динамического взаимодействия без нарушения валидности HTML.
Ответ 18+ 🔞
А, ну это же про эти ваши data-* атрибуты, да? Ну слушай, история-то простая, но гениальная, блядь.
Раньше-то, сука, фронтендеры как извращались: кто в class лепил какую-то хуйню типа user-id-123, кто в кастомные атрибуты типа myfancydata писал — валидатор, естественно, орал как резаный, всё нестандартно, пиздец.
А потом придумали, ёпта, гениальную штуку. Говорят: «А давайте, блядь, всё, что начинается на data-, считать законным!». И понеслась, в рот меня чих-пых!
Вот смотри, в чём прикол. У тебя есть, допустим, <div>. И ты хочешь к нему прилепить какую-то инфу, которая для браузера — похуй, а для твоего скрипта — овердохуища важна. Например, айдишник пользователя или его роль.
Раньше бы ты сделал какую-то дичь. А теперь — красота:
<div id="user" data-user-id="123" data-role="admin" data-last-login="2023-10-26">
Вася Пупкин
</div>Видишь? data-user-id, data-role. Валидатор доволен, браузер не нервничает, а ты, сука, прилепил к элементу целую пачку данных! Как будто хуй в пальто — и не видно, и есть.
А в JavaScript достаётся это всё — проще пареной репы, блядь:
const userDiv = document.getElementById('user');
console.log(userDiv.dataset.userId); // "123"
console.log(userDiv.dataset.role); // "admin"Обрати внимание, dataset — это такой объект, который все data- атрибуты собрал, да ещё и camelCase сделал из data-last-login в lastLogin. Красота, ёперный театр!
Но и это ещё не всё, блядь! Оказывается, в CSS к этой хуйне тоже можно прицепиться!
[data-role="admin"] {
border: 2px solid red;
font-weight: bold;
}Представляешь? Наш Вася-админ сразу красной рамочкой светиться будет! Удобно, сука, до безобразия.
Короче, data-* — это как потайной карман в штанах. С виду нихуя нет, а туда и ключи, и заначку, и жвачку можно засунуть. Главное — не злоупотреблять, а то получится data-everything-and-the-kitchen-sink, и будет пизда.