如何在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); }

【如何在DOM元素上保存信息，数据属性介绍HTML5】要使用这些数据属性来定制样式, 请使用：

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