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+

你可能感兴趣的:(data-*自定义属性)