HTML5自定义属性对象Dataset简介 -

bijian1013

浏览: 3190447 次
性别:
来自: 深圳

最近访客更多访客>>

dy.f

godandghost

lovefiger

marsgrayson

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML5自定义属性对象Dataset简介

博客分类：

JavaScript

html5 data-

一.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>

运行结果：