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

  • 不要保存任何敏感信息, 因为可以在源代码中查看这些信息。
  • 请勿将大写字母与data- *属性一起使用(它们将被强制自动小写, 但如果你不知道此内容, 则在尝试使用名称错误的javascript检索它们时会浪费时间)。
  • 要支持IE 10及更低版本, 你需要使用getAttribute()访问数据属性。
  • 对于小型数据集, 它们是一个很好的解决方案。

    推荐阅读