data-*自定义属性

• 说明
  • HTML5增加了一项新的功能自定义属性，也就是data -*自定义属性。在H5中是以data-为前缀来设置，可以进行数据存放。
  • 在高级浏览器的情况下可以通过脚本进行自定义和存储数据
  • 列如：

      
sss

---

• 使用attribute方法存取 data-* 自定义属性的值
  • 得到某一属性值 getAttribute
  • 设置某一属性 setAttribute

sss

---

• 关于data-属性选择器
  • 可以根据自定义的 data- 属性选择相关的元素

  // 选择所有包含 'data-flowering' 属性的元素
  document . querySelectorAll ( '[data-flowering]' ) ;
  // 选择所有包含 'data-text-colour' 属性值为red的元素
  document . querySelectorAll ( '[data-text-colour="red"]' ) ;
  

  • 同样的我们也可以通过 data- 属性值对相应的元素设置CSS样式

   
   
   1 
   
   码头 
  

---

• 命名规则
  • 在html中采用的是data-*直接命名某一属性
  • 在JS中，要采用驼峰命名方式进行获取

---

• 浏览器兼容性
  • Internet Explorer 11+
  • Chrome 8+
  • Firefox 6.0+
  • Opera 11.10+
  • Safari 6+