详解H5的自定义属性data-*-木庄网络博客

本文摘自PHP中文网，作者Y2J，侵删。

HTML5 增加了一项新功能是自定义数据属性，也就是 data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性，来进行一些数据的存放

当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。

例如：

代码如下:

使用attribute方法存取 data-* 自定义属性的值

使用attributes方法存取 data-* 自定义属性的值非常方便：

代码如下:

// 使用getAttribute获取 data- 属性
 
  var user = 
document
 . getElementById ( 'user' ) ;
 
  var userName = plant . getAttribute ( 'data-uname' ) ; // userName = '脚本之家'
 
  var userId = plant . getAttribute ( 'data-uid' ) ; // userId = '12345'
 
  // 使用
set
Attribute设置 data- 属性
 
  user . setAttribute ( 'data-site' , 'http://www.jb51.net' ) ;

此方法能在所有的现代浏览器中正常工作，但它不是HTML 5 的自定义 data-*属性被使用目的，不然和我们以前使用的自定义属性就没有什么区别了，例如：

代码如下:

<p id = "user" uid = "12345" uname = "脚本之家" > </p>
 
 <script>
 
 // 使用getAttribute获取 data- 属性
 
 var user = document . getElementById ( 'user' ) ;
 
 var userName = plant . getAttribute ( 'uname' ) ; // userName = '脚本之家'
 
 var userId = plant . getAttribute ( 'uid' ) ; // userId = '12345'
 
 // 使用setAttribute设置 data- 属性
 
 user . setAttribute ( 'site' , 'http://www.jb51.net' ) ;
 
 </script>