data-*属性具体怎么用
data-*属性具体怎么用
qq_奔跑吧骚年_1
2015-12-31
2 回答
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。
data-* 属性包括两部分：
属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
属性值可以是任意字符串。
举个例子，定义不同的动物
<ul> <li data-animal-type="bird">Owl</li> <li data-animal-type="fish">Salmon</li> <li data-animal-type="spider">Tarantula</li> </ul>
赞Perona的回答。我再补充一些：
data-* 的值的获取和设置
2种方法：
1、传统方法
getAttribute() 获取data-*属性值；
setAttribute() 设置data-*属性值
2、HTML5新方法
例如 data-href
dataset.href 获取data-href属性值
dataset.href = 'http://imooc.com' 设置data-href属性值
总结：传统方法无兼容性问题，但是不够优雅、方便
HTML5新方法很优雅、方便，但是有兼容性问题，可以在移动端开发或不支持低版本浏览器的项目中使用
兼容性问题看这儿：http://caniuse.com/#search=dataset
举报
0/150
提交
取消
