data-*自定义属性

• 说明
  • 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- 属性选择相关的元素

  // 选择所有包含 '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+