zoukankan      html  css  js  c++  java
  • 【HTML5】'data'属性的作用是什么?

    Resig在2008年在其博客中介绍过HTML5的data-属性,现如今HTML5在如火如荼地推广,似乎国内的技术有些延迟,这篇博文可以在这里找到。

    data-为前端开发者提供自定义的属性,这些属性集可以通过对象的dataset属性获取,不支持该属性的浏览器可以通过 getAttribute方法获取。ppk提到过使用rel属性,lightbox库推广了rel属性,HTML5提供了data-做替代,这样可以更好 地使用自定义的属性。


    <div data-author="david" data-time="2011-06-20"
              data-comment-num
    ="10"  data-category="javascript">
    ....
    </div>

    上面HTML代码提供了单个文章所拥有的一些属性。通过JS代码可以获得这些自定义的属性。
    var post = document.getElementsByTagName('div')[0];
    post.dataset; // DOMStringMap
    post.dataset.commentNum; // 10

    需要注意的是,data-之后的以连字符分割的多个单词组成的属性,获取的时候使用驼峰风格。

    并不是所有的浏览器都支持.dataset属性,测试的浏览器中只有Chrome和Opera支持。

  • 相关阅读:
    redhat 5 中文乱码
    生成树
    交换机端口模式
    链路聚合
    AP注册
    信息收集
    Python 25 Django跨域请求
    Python 24 Django之csrf中间件
    Python 23 Django基础
    Python 21 Flask(三)第三方组件
  • 原文地址:https://www.cnblogs.com/sniper007/p/2746277.html
Copyright © 2011-2022 走看看