数据属性只是任何html标记的另一个普通属性, 任何属性名称以data-开头的元素上的任何属性都是数据属性。你可以在上面保存任何类型的信息。
这些属性可以使用Javascript和CSS来访问。
要添加数据属性, 我们需要:
- 要保存的一些信息
- 渴望生活
<
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()访问数据属性。
- 对于小型数据集, 它们是一个很好的解决方案。
推荐阅读
- 如何解决Kali Linux apt-get安装(E:无法找到软件包checkinstall)
- 从画布创建的图像具有黑色背景(HTML5)
- 每个开发人员都应了解的10条Twig技巧和基本功能
- 如何使用Typescript在Window对象上声明新属性
- 反混淆JavaScript代码并从脚本中检索源代码
- 如何在iframe中拒绝你的网站对第三方网站的访问
- 使用javascript html5在画布上绘制点(圆)
- 如何使用Webpack从生产版本中删除console.log(或自定义调试功能)
- MPAndroidChart如何让y轴以非零值开始()