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

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

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

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

要保存的一些信息

渴望生活

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

My article title

Article content

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

}

不要保存任何敏感信息, 因为可以在源代码中查看这些信息。

请勿将大写字母与data- *属性一起使用(它们将被强制自动小写, 但如果你不知道此内容, 则在尝试使用名称错误的javascript检索它们时会浪费时间)。

要支持IE 10及更低版本, 你需要使用getAttribute()访问数据属性。

对于小型数据集, 它们是一个很好的解决方案。