html5自定义属性什么用

html5自定义属性“data-*”用于存储私有页面后应用的自定义数据，而自定义的数据可以让页面拥有更好的交互体验（不需要使用Ajax或去服务端查询数据），语法“<element data-*=指定属性值（一个字符串）>”；“data-*”属性由两部分组成：1、属性名不要包含大写字母，在“data-”后必须至少有一个字符；2、属性值，该值可以是任何字符串。

本教程操作环境：windows7系统、HTML5版、Dell G3电脑。

html5自定义属性data-*

data-* 属性用于存储私有页面后应用的自定义数据，是 HTML5 新增的属性。

1	<element data-*=somevalue>

• somevalue：指定属性值 (一个字符串)

data-* 属性可以在所有的 HTML 元素中嵌入数据。

自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。

data-* 属性由以下两部分组成：

• 属性名不要包含大写字母，在 data- 后必须至少有一个字符。

• 属性值，该属性值可以是任何字符串

注意： 自定义属性前缀 data- 会被客户端忽略。

利用dataset可以获取data-属性构造的对象，该方法目前只能在Chrome 、Opera等部分浏览器中实现，其他浏览器如需获取其属性值需要使用getAttribute和setAttribute来操作。

只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。

1	<div id=myDiv data-attribute=value>在标签里设置H5新增的自定义属性</div>

这个data属性还可以应用在CSS中，前提是你的浏览器支持after伪类，以及content的attr属性（低版本的IE不支持）：

1	<div id=myDiv data-attribute=属性值>data属性应用于CSS中</div>

1 2 3 4 5 6 7 8 9 10 11

#myDiv{   position: ralative; }    #myDiv:hover:after{   position: absolute;   top: 0px;   left: 0px;   content: attr(data-attribute);   color: red; }

如何获取data属性的值？

1	<div id=myDiv data-attribute=value>在标签里设置H5新增的自定义属性</div>

1、使用getAttribute来获取

1 2	var myDiv = document.getElementById(myDiv); var theValue = myDiv.getAttribute(user-defined-attribute);

2、使用Html5自定义属性对象Dataset来获取

1 2 3

var myDiv = document.getElementById(myDiv);    var theValue = myDiv.dataset.attribute;

注意：带连字符连接的名称在使用的时候需要命名驼峰化，即大小写组合书写，这与应用元素的style对象类似，dom.style.borderColor。例如data属性为data-other-attribute，则我们要获取相应的值可以使用：myp.dataset.otherAttribute

如果Html元素定义了多个自定义属性，如何获取？

1	<div id=myDiv data-attribute1=value data-attribute2=value2 data-attribute3=value3>在标签里设置多个自定义属性</div>

2、使用循环遍历

1 2 3 4 5 6 7 8

var myDiv = document.getElementById(myDiv); var attrs = myDiv.attributes, var expense = {}, i, j;  for (i = 0, j = attrs.length; i < j; i++) {   if(attrs.name.substring(0, 5) == data-) {     expense[attrs.name.substring(5)] = attrs.value;   } }

3、使用dataset属性

1	var expense = document.getElementById(myDiv).dataset;

注：dataset并不是典型意义上的JavaScript对象，而是个DOMStringMap对象，DOMStringMap是HTML5一种新的含有多个名-值对的交互变量

1）、让所有的自定义的属性值塞到一个数组中

1 2 3 4 5

var chartInput = [];    for (var item in expense) {   chartInput.push(expense[item]); }

2）、删掉一个data属性

1	delete myDiv.dataset.attribute;

3、增加一个data属性

1	myDiv.dataset.attribute4 = value4;

dataset的兼容性处理

如果浏览器不支持dataset，有必要做一下兼容处理：

1 2 3 4 5 6 7

if(myDiv.dataset) {   myDiv.dataset.attribute = valueXX; // 设置自定义属性   var theValue = myDiv.dataset.attribute; // 获取自定义属性 } else {   myDiv.setAttribute(data-attribute, valueXX); // 设置自定义属性   var theValue = myDiv.getAttribute(data-attribute); // 获取自定义属性 }

结语：

使用dataset操作data 要比使用getAttribute速度稍微慢些，虽然使用dataset不能提高代码的性能，但是对于简洁代码，提高代码的可读性和可维护性是很有帮助的。

【推荐课程：HTML5视频教程、web前端】

html5自定义属性“data-*”用于存储私有页面后应用的自定义数据，而自定义的数据可以让页面拥有更好的交互体验（不需要使用Ajax或去服务端查询数据），语法“<element data-*=指定属性值（一个字符串）>”；“data-*”属性由两部分组成：1、属性名不要包含大写字母，在“data-”后必须至少有一个字符；2、属性值，该值可以是任何字符串。

本教程操作环境：windows7系统、HTML5版、Dell G3电脑。

html5自定义属性data-*

data-* 属性用于存储私有页面后应用的自定义数据，是 HTML5 新增的属性。

1	<element data-*=somevalue>

• somevalue：指定属性值 (一个字符串)

data-* 属性可以在所有的 HTML 元素中嵌入数据。

自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。

data-* 属性由以下两部分组成：

• 属性名不要包含大写字母，在 data- 后必须至少有一个字符。

• 属性值，该属性值可以是任何字符串

注意： 自定义属性前缀 data- 会被客户端忽略。

利用dataset可以获取data-属性构造的对象，该方法目前只能在Chrome 、Opera等部分浏览器中实现，其他浏览器如需获取其属性值需要使用getAttribute和setAttribute来操作。

只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。

1	<div id=myDiv data-attribute=value>在标签里设置H5新增的自定义属性</div>

这个data属性还可以应用在CSS中，前提是你的浏览器支持after伪类，以及content的attr属性（低版本的IE不支持）：

1	<div id=myDiv data-attribute=属性值>data属性应用于CSS中</div>

1 2 3 4 5 6 7 8 9 10 11

#myDiv{   position: ralative; }    #myDiv:hover:after{   position: absolute;   top: 0px;   left: 0px;   content: attr(data-attribute);   color: red; }

如何获取data属性的值？

1	<div id=myDiv data-attribute=value>在标签里设置H5新增的自定义属性</div>

1、使用getAttribute来获取

1 2	var myDiv = document.getElementById(myDiv); var theValue = myDiv.getAttribute(user-defined-attribute);

2、使用Html5自定义属性对象Dataset来获取

1 2 3

var myDiv = document.getElementById(myDiv);    var theValue = myDiv.dataset.attribute;

注意：带连字符连接的名称在使用的时候需要命名驼峰化，即大小写组合书写，这与应用元素的style对象类似，dom.style.borderColor。例如data属性为data-other-attribute，则我们要获取相应的值可以使用：myp.dataset.otherAttribute

如果Html元素定义了多个自定义属性，如何获取？

1	<div id=myDiv data-attribute1=value data-attribute2=value2 data-attribute3=value3>在标签里设置多个自定义属性</div>

2、使用循环遍历

1 2 3 4 5 6 7 8

var myDiv = document.getElementById(myDiv); var attrs = myDiv.attributes, var expense = {}, i, j;  for (i = 0, j = attrs.length; i < j; i++) {   if(attrs.name.substring(0, 5) == data-) {     expense[attrs.name.substring(5)] = attrs.value;   } }

3、使用dataset属性

1	var expense = document.getElementById(myDiv).dataset;

注：dataset并不是典型意义上的JavaScript对象，而是个DOMStringMap对象，DOMStringMap是HTML5一种新的含有多个名-值对的交互变量

1）、让所有的自定义的属性值塞到一个数组中

1 2 3 4 5

var chartInput = [];    for (var item in expense) {   chartInput.push(expense[item]); }

2）、删掉一个data属性

1	delete myDiv.dataset.attribute;

3、增加一个data属性

1	myDiv.dataset.attribute4 = value4;

dataset的兼容性处理

如果浏览器不支持dataset，有必要做一下兼容处理：

1 2 3 4 5 6 7

if(myDiv.dataset) {   myDiv.dataset.attribute = valueXX; // 设置自定义属性   var theValue = myDiv.dataset.attribute; // 获取自定义属性 } else {   myDiv.setAttribute(data-attribute, valueXX); // 设置自定义属性   var theValue = myDiv.getAttribute(data-attribute); // 获取自定义属性 }

结语：

使用dataset操作data 要比使用getAttribute速度稍微慢些，虽然使用dataset不能提高代码的性能，但是对于简洁代码，提高代码的可读性和可维护性是很有帮助的。

【推荐课程：HTML5视频教程、web前端】