HTML5的自定义属性的使用总结

Posted xywl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML5的自定义属性的使用总结相关的知识,希望对你有一定的参考价值。

以前我们需要自定义属性的时候一般是这样做的,在标签里面加上我们自己设置的一些属性:

<div id="myDiv" user-defined-attribute="value">在标签里设置自定义属性</div>

然后获取里面的值是使用getAttribute来获取自定义属性里面的值:

var myDiv = document.getElementById("myDiv");

var theValue = myDiv.getAttribute("user-defined-attribute");

现在H5为我们提供了一个data属性——“data-”前缀,可以让所有的html元素支持自定义属性,只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。

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

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

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

#myDiv{
position: ralative;
}

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

 


如何获取data属性的值?

<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>
一、使用getAttribute来获取


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


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

var myDiv = document.getElementById("myDiv");

var theValue = myDiv.dataset.attribute;

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

 

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


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


一、使用循环遍历

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

二、使用dataset属性

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

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

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


var chartInput = [];

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


2、删掉一个data属性

delete myDiv.dataset.attribute;


3、增加一个data属性

myDiv.dataset.attribute4 = ‘value4‘;


dataset的兼容性处理

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


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的自定义属性的使用总结的主要内容,如果未能解决你的问题,请参考以下文章

html5的自定义data-*属性和jquery的data()方法的使用示例

HTML5的自定义属性data-*详细介绍和JS操作实例

HTML5的自定义属性data-*详细介绍和JS操作实例

Angular使用总结 ---以密码确认为例实现模版驱动表单的自定义校验

(总结4)HTML5中如何自定义属性

关于H5的自定义属性data-*