Как сохранить информацию об элементе DOM, введение в атрибуты данных HTML5

Каковы данные- * атрибуты

Атрибут данных — это просто еще один простой атрибут для любого тега html, любой атрибут любого элемента, имя атрибута которого начинается с данных, является атрибутом данных. Вы можете сохранить любую информацию на нем.

Эти атрибуты могут быть приняты с помощью Javascript и CSS.

Как использовать атрибуты data- *

Чтобы добавить атрибут данных, нам нужно:

• Некоторая информация для сохранения
• Желание жить

Просто добавьте атрибут (например, class = «myclass») к тегу, который вы хотите. Например, в следующем div некоторые данные будут сохранены для извлечения

My article title

Article content

Доступ к атрибутам данных с помощью Javascript

Есть много способов получить атрибут данных с помощью JavaScript:

Высокая поддержка JavaScript (рекомендуется)

var domElement = document.getElementById('randomid');
var articleId = domElement.getAttribute('data-articleid');
console.log(articleId);//Outputs 123

Мы будем использовать встроенную функцию getAttribute и дадим полное имя атрибута, включая data-, это доступно во всех браузерах.

Наборы данных Javascript

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

var domElement = document.getElementById("randomid");
var articleId = domElement.dataset.articleid;
console.log(articleId);//Outputs 123

Как вы можете видеть, данные были переведены в свойства объекта набора данных элемента.

JQuery

В jQuery мы будем использовать функцию .data (). Если вы используете более старую версию jQuery, вы можете использовать функцию .attr ().

var $domElement = $('#randomid');
var articleId = $domElement.data('articleid');
console.log(articleId); // Outpusts 123

Если вы используете старую версию, используйте функцию attr и введите полное имя, включая data-:

var $domElement = $('#randomid');
var articleId = $domElement.attr('data-articleid');

Доступ к атрибутам данных с помощью CSS

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

Чтобы получить его с помощью css, используйте функцию attr (), например, в этом случае идентификатор статьи будет помещен перед идентификатором со следующим правилом:

div::before {
content: attr(data-articleid);
}

Чтобы использовать эти атрибуты данных для настройки со стилями, используйте:

/**
* All the div's with data-maincategorie='articles' will have blue as background color
**/
div[data-maincategorie='articles'] {
background-color: blue;
}

Важные заметки :

• Не сохраняйте конфиденциальную информацию, так как это можно увидеть в исходном коде.
• Не используйте верхний регистр с атрибутами data- * (они будут вынуждены автоматически делать нижний регистр, но если вы этого не знаете, вы потратите время, пытаясь получить их с помощью JavaScript с неправильным именем).
• Для поддержки IE 10 и ниже вам необходимо получить доступ к атрибутам данных с помощью getAttribute ().
• Это отличное решение для мини-наборов данных.