如何使用H5的dataset

百变鹏仔 2个月前 (10-18) #H5教程

文章标签如何使用

这次给大家带来如何使用h5的dataset，使用h5的dataset的注意事项有哪些，下面就是实战案例，一起来看一下。

HTML5标准允许你在普通的元素标签里，嵌入类似data-*的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由javascript动态修改，也支持CSS选择器进行样式设置。这使得data属性特别灵活，也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。当然，任何的标签元素里面可以随意的加上任何自定义属性，也可以获取他们的值，但没有这个来的灵活。我们先来看一下随意的属性存储数据吧。

1.利用dom节点对象的setAttribute和getAttribute

例子：

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title> </head> <body>   <span id="music" mtitle="yestoday once more">昨日重现</span>   <script type="text/javascript">      var mdoc=document.getElementById(&#39;music&#39;); alert(mdoc.getAttribute(&#39;mtitle&#39;));   </script> </body></html>

运行这段代码，页面上可以获取mtitle对应的值。这样写虽然可以，但是想要预置更多的信息，应该采用一个语义属性data-*。比如刚才例子，想给音乐

注入

文章推荐

如何使用H5的dataset

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集