zoukankan      html  css  js  c++  java
  • html5新特性data_*自定义属性使用(转)

    原帖地址:http://jingyan.baidu.com/article/a378c96098c048b32828300b.html?qq-pf-to=pcqq.c2c

    HTML5规范里增加了一个自定义data属性.

    这个自定义data属性的用法非常的简单, 就是你可以往HTML标签上添加任意以 "data-"开头的属性, 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的.

    使用data-*可以解决自定义属性混乱无管理的现状。

    工具/原料

    • Internet Explorer 11+    Chrome 8+    Firefox 6.0+   Opera 11.10+    Safari 6+

    • 以上任意浏览器一个

    方法/步骤

    1. 1

      获取自定义属性的值

      如下:

      <div id="content" data-age="18">html5 data-*自定义属性 age</div>

      多了一个”data-*” 属性, 如何获取呢?

      //js

      var content= document.getElementById('content');

      alert(content.dataset.age)

      //jquery

      $('#content').data('age');//读

    2. 2

        读取的时候是通过dataset对象,使用”.”来获取属性,需要去掉data-前缀,连字符需要转化为驼峰命名

      <div id="content" data-user-list="user_list">data-user_list自定义属性 </div>

      //js

      var content= document.getElementById('content');

      alert(content.dataset.userList)

      //jquery

      $('#content').data('userList');//读

    3. 3

      通过js方式给data-*设置值

      <div id="content" data-user-list="user_list">data-user_list自定义属性 </div>

      //js

      var content= document.getElementById('content');

      content.dataset.name='我叫tom'

      alert(content.dataset.name)

      //jquery

      $('#content').data('name','我叫tom');//写

    4. 4

      getAttribute/setAttribute方法的使用

      var content= document.getElementById('content');        

      content.dataset.birthDate = '19990619';        

      content.setAttribute('age', 25);       

      console.log(content.getAttribute('data-age')); //25       console.log(content.getAttribute('data-birth-date')); //19990519   

  • 相关阅读:
    前后端数据处理+数据展示分页
    数据库表关系:多对多的三中方式
    MTV与MVC模式
    F与Q查询
    ORM表单操作
    IIS 7 应用程序池自动回收关闭的解决方案
    ASP.NET MVC 使用带有短横线的html Attributes
    能加载文件或程序集“XXX”或它的某一个依赖项,系统找不到指定的文件
    调试MVC项目,不关闭 IIS EXPRESS
    已有打开的与此 Command 相关联的 DataReader,必须首先将它关闭
  • 原文地址:https://www.cnblogs.com/zygxfx/p/4485227.html
Copyright © 2011-2022 走看看