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

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

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

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

    工具/原料

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

    • 以上任意浏览器一个

    方法/步骤

    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.  

        读取的时候是通过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.  

      通过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 

  • 相关阅读:
    java Servlet小结
    Java 自定义客户端与服务器
    JAVA IO流总结
    java udp与tcp
    tomcat作为服务器的配置
    Linux
    Git -- 如何删除本地仓库
    ASP.NET Core 基础 Startup 类
    ASP.NET Core解说之Middleware(中间件)
    一、Redis安装 Redis学习记录
  • 原文地址:https://www.cnblogs.com/wdlhao/p/5031248.html
Copyright © 2011-2022 走看看