一.html5 自定义属性介绍
HTML5中自定义合法属性data-,就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放,例如我们要在一个文字按钮上存放相对应的id:
<a href="javascript:" data-id="2312">测试</a>
这里的data-前缀就被称为data属性,其可以通过脚本进行定义,也可以应用CSS属性选择器进行样式设置。数量不受限制,在控制和渲染数据的时候提供了非常强大的控制。
二.Dataset基础
下面是元素应用data属性的一个例子:
<div id="day2-meal-expense"
data-drink="coffee"
data-food="sushi"
data-meal="lunch">¥20.12
</div>
要想获取某个属性的值,可以像下面这样使用dataset对象:
var expenseday2 = document.getElementById('day2-meal-expense'); var typeOfDrink = expenseday2.dataset.drink;
实例:
<html>
<title>test</title>
<body>
<div id="day2-meal-expense"
data-drink="coffee"
data-food="sushi"
data-meal="lunch">¥20.12
</div>
<script type="text/javascript">
window.onload = function() {
var expenseday2 = document.getElementById('day2-meal-expense');
var typeOfDrink;
if(expenseday2.dataset) {
typeOfDrink = expenseday2.dataset.drink;
}else {
typeOfDrink = expenseday2.getAttribute('data-drink');
}
alert("饮料是:" + typeOfDrink);
}
</script>
</body>
</html>
运行结果:
需要注意的是带连字符连接的名称在使用的时候需要命名驼峰化,即大小写组合书写,这与应用元素的style对象类似,dom.style.borderColor。例如,假设上面的例子中现在有如下data属性,data-meal-time,则我们要获取相应的值可以使用:
expenseday2.dataset.mealTime
data属性基本上所有的浏览器都是支持的,但是dataset对象就属于新贵,目前仅在Opera 11.1+, Chrome 9+下可以通过JavaScript,使用dataset访问你自定义的data属性。至于其他浏览器,好像还不支持。
参考:http://www.cnblogs.com/ATree/archive/2011/08/24/HTML5-Dataset.html