您当前的位置:首页 > 建站知识 > 编程知识

HTML5的data-*属性

发布时间: 2021-09-05 │ 浏览:1772 

HTML5可以添加data-前缀为元素增加非标准型的属性,这些属性与渲染无关,只为在JS中方便操作数据。

例如:
<span id="a" data-v="1">我带数据</span>

要获取data-v属性的值,有四种方法:

1、getAttribute()和setAttribute()
const v=document.getElementById("a");
console.log(v.getAttribute("data-v"));//读取
v.setAttribute("data-v","2");//赋值

2、dataset()方法
在JS中还可以通过dataset取值。
const v=document.getElementById("a");
console.log(v.dataset.a);
v.dataset.a++;//加1

3、JQuery的data()方法
var v=$("#a").data("v");
$("#a").data("v","2");//赋值

4、JQuery的attr()方法
var v=$("#a").attr("data-v");
$("#a").attr("data-v","2");//赋值


这四种方法都可实现相同的功能,并无优劣之分,只要适合你习惯就好。