首页 > 代码库 > html5——自定义属性

html5——自定义属性

2024-08-28 06:04:01   219人阅读

自定义属性：添加前缀“data-”

dataset属性：添加自定义属性后，通过元素的dataset属性来访问自定义属性的值(属性名没有data-前缀)
data-name:dataset.name
data-name-first:dataset.nameFirst

 

html结构：

1 <div id="div1" data-name="china" data-name-all="chinese">div</div>

 

1.利用 getAttribute、setAttribute 存取 dataset

 1 var oDiv = document.getElementById("div1");
 2 
 3 //get
 4 console.log(oDiv.getAttribute("data-name")); // china
 5 console.log(oDiv.getAttribute("data-name-all")); // chinese
 6 
 7 
 8 //set
 9 oDiv.setAttribute("data-name","hello");
10 oDiv.setAttribute("data-name-all","hi");

这样就可以以一种更兼容的方式，来存取dataset数据。所做出的任何更改，都是可以实时反映到元素data属性上的。

但是这种方法比较低端，如果遇到多个data-*自定义字段，想要一次全部获取所有的data属性并包装成对象的话，还必须做一个循环，很麻烦。

 

2.利用 dataset API 存取 dataset

 1 var oDiv = document.getElementById("div1");
 2 
 3 //get
 4 console.log(oDiv.dataset.name); // china
 5 console.log(oDiv.dataset.nameAll); // chinese
 6 
 7 
 8 //set
 9 oDiv.dataset.name = ‘hello‘;
10 oDiv.dataset.nameAll = ‘hi‘;

 

 

3.利用 jQuery.attr 方法存取 dataset

1 //get
2 console.log($(‘#div1‘).attr(‘data-name‘)); // china
3 console.log($(‘#div1‘).attr(‘data-name-all‘)); // chinese
4 
5 
6 //set
7 $(‘#div1‘).attr(‘data-name‘, ‘hello‘);
8 $(‘#div1‘).attr(‘data-name-all‘, ‘hi‘);

 

 

4.利用 jQuery.data 方法存取 dataset

1 //get
2 console.log($(‘#div1‘).data(‘name‘)); // china
3 console.log($(‘#div1‘).data(‘nameAll‘)); // chinese
4 
5 
6 //set
7 $(‘#div1‘).data(‘name‘, ‘hello‘);
8 $(‘#div1‘).data(‘nameAll‘, ‘hi‘);

这样的方法也能出色的存取data属性，但是需要注意，jQuery.data对data数据做出的更改，不会反映到HTML元素data属性上。

 

html5——自定义属性


联系
我们