- 说明
- HTML5增加了一项新的功能自定义属性，也就是data -*自定义属性。在H5中是以data-为前缀来设置，可以进行数据存放。
- 在高级浏览器的情况下可以通过脚本进行自定义和存储数据
- 列如：
<div id="user" data-uid="12345" data-uname="愚人码头" data-birth="1992-03-02">sss</div>
- 使用attribute方法存取 data-* 自定义属性的值
- 得到某一属性值 getAttribute
- 设置某一属性 setAttribute
<div id="user" data-uid="12345" data-uname="愚人码头" data-birth="1992-03-02">sss</div>
<script>
var user = document.getElementById('user')
var uid = user.getAttribute('data-uid')//得到data-uid属性
console.log(uid)
user.setAttribute('site','http://www.baidu.com')//设置属性site
console.log(user.dataset.birth)
</script>
- 关于data-属性选择器
// 选择所有包含 'data-flowering' 属性的元素
document . querySelectorAll ( '[data-flowering]' ) ;
// 选择所有包含 'data-text-colour' 属性值为red的元素
document . querySelectorAll ( '[data-text-colour="red"]' ) ;
- 同样的我们也可以通过 data- 属性值对相应的元素设置CSS样式
<style type ="text/css">
.user {
width : 256px ;
height : 200px ;
}
.user[data-name='feiwen'] {
color : brown
}
.user[data-name='css'] {
color : red
}
</style>
<div class = "user" data-id = "123" data-name = "feiwen" > 1 </div>
<div class = "user" data-id = "124" data-name = "css" > 码头 </div>
- 命名规则
- 在html中采用的是data-*直接命名某一属性
- 在JS中，要采用驼峰命名方式进行获取
- 浏览器兼容性
- Internet Explorer 11+
- Chrome 8+
- Firefox 6.0+
- Opera 11.10+
- Safari 6+
