html中data-属性作用,html中的data-*的用法和作用 自定义属性

定义和用法

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

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

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

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

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

该属性可以是任何字符串

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

例如，定义不同的动物：

• Owl
• Salmon
• Tarantula

用法

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

个人理解：用法

之前不是很懂为什么会有这样的功能的出现，知道我发现了个案例：

我想要在渲染出来了个列表数据之后，在最后面的一个button标签绑定一些操作，比如我点击这个button，这一行数据就会删除。

然而，我是循环渲染出来来了10行数据，当我点击第6行的时候，我又怎么知道我点的是第几行？总不能给某个元素写上自己第几行？

那么这时候自定义的数据就有用了，你渲染的时候直接写在html标签里面，不如叫做data-line-num="i"，那么当我点击这个按钮，就判断这个按钮的这个属性等于多少，就知道我要删除i为几的数据了，然后后面把所有数据第i个删了，再重新渲染就好了。

个人案例：

为什么我要了解这个，因为我有那样的需求的时候不知道改怎么做，就去绑定了id为i，然而我自己也知道这是绝对不对的，id这样的全局参数，不好自定义，也容易污染，然后咨询了周围的大牛，才终于理解了这个自定义属性的作用。