如何在DOM元素上保存信息，数据属性介绍HTML5

数据属性只是任何html标记的另一个普通属性, 任何属性名称以data-开头的元素上的任何属性都是数据属性。你可以在上面保存任何类型的信息。

这些属性可以使用Javascript和CSS来访问。

要添加数据属性, 我们需要：

要保存的一些信息
渴望生活

只需将一个属性(如class =” myclass”)添加到所需的标签即可。例如, 在以下div中, 将保存一些数据以进行检索

<div id="randomid" data-articleid="123" data-maincategorie="articles" data-categories="[1, 23, 35, 68, 6]" data-gifpath="/path/to/gif.gif">
  <h3>My article title</h3>
  <p>
    Article content
  </p>
</div>

有很多方法可以使用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');

由于数据属性是纯HTML属性, 因此你甚至可以从CSS访问它们。

要使用CSS检索它, 请使用attr()函数, 例如, 在这种情况下, 商品ID将按照以下规则放置在ID之前：

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; 
}