关于这个主题的文章和博客其实已经非常多了，这里并非要重复造轮子，只是看到一些例子稍微有点麻烦，其实也很简单，但是对于一个刚刚入门的人，w3c的例子甚至可能看不懂，这里列出一个最简单不过的小案例以供参考

大牛自然略过，不吝指教

代码如下

 <html>

 <head>

     <title>Html5 custom data attribute Test</title>

 </head>

 <body >

    <div class="user" data-name="xiaoan"></div>

  <script type="text/javascript">

       var user = document.getElementsByTagName("div")[0];

       if(isIe()){
           //如果是ie浏览器这样调用

         alert(user.getAttribute('data-name'));

       }

       else{
           //非ie浏览器调用方法

         alert(user.dataset['name']);

       }

 //判断是否是ie，但是在ie10 或者ie11下，实际检测出来的效果是false，这里稍微注意一下即可

       function isIe(){

         return window.ActiveXObject ? true : false;

       }

  </script>

 </body>

 </html>

这足够简单了吧，

1.定义一个div标签，一个属性叫做data-name,  data-  是固定的，后面的随意

2.根据浏览器弹出这个属性的值

关于html标签元素的data-*属性的更多相关文章

  1. jQuery-对标签元素 文本操作-属性操作-文档的操作

    一.对标签元素文本操作 1.1 对标签中内容的操作 // js var div1 = document.getElementById("div1"); div1.innerText ...

  2. javaScript tips —— 标签上的data属性

    HTML5规定可以为元素添加非标准型的属性,只需添加前缀data-,这些属性可以随意添加,随意命名,目的是为元素提供与渲染无关的信息,或提供语义信息. 传统获取方式 'getAttribute' da ...

  3. HTML 标签元素的 align 属性

    align 属性规定段落中文本的对齐方式. 有 left  right center  justify 这些参数 left  right center  就是左对齐 右对齐 中间对齐 justify  ...

  4. input标签元素，value属性取值问题，赋值

    验证val:<input type="text" id="id" name="name" value="空值"&g ...

  5. js 获取html5的data属性

    我以前一直以为只能用jquery的data()来获取 哈哈 是我太弱了 <!DOCTYPE html> <html> <head> <title>dat ...

  6. webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2

    js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...

  7. JS组件系列——使用HTML标签的data属性初始化JS组件

    前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...

  8. 高并发分布式系统中生成全局唯一（订单号）Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数

    高并发分布式系统中生成全局唯一(订单号)Id   1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...

  9. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  10. jQuery基础之获取和设置标签元素属性

    jQuery基础之获取和设置标签元素属性方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script& ...

随机推荐

  1. 关于jQuery的ajax的源码的dataType解读

    $.ajax其实底层还是用的XMLHttpRequest,对于加载数据的格式datatype有:xml.text.html.json.jsonp.script. 其中xml.text不需要处理,直接使 ...

  2. JS中slice,splice,split的区别

    不知道大家对slice,splice,splite是肿么样的感觉,反正我刚接触到这三个函数的时候整个人都懵了,因为一个个长的跟孪生兄弟似的,每次用的时候都会混,于是决定记下来,也给大家当个参考吧. s ...

  3. mongodb简单初级操作

    学习之余记录,仅供参考 mongodb启动: mongodb安装在D:\mongodb 目录下,启动时在该目录bin文件夹下打开命令行窗口 在启动数据库时,将datapath参数指向db目录   输入 ...

  4. android欢迎页源码

    直接上源码: import android.app.Activity; import android.content.Intent; import android.os.Bundle; import ...

  5. 08JS高级 ——“继承”

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. css层叠机制说明

    css通过建立与文档的关联而实施效果.文档结构重要性不言而喻,对于建立良好的内容索引.提高可维护性.较好的可访问性:另,利于css选择器选择.继承机制. 概要地讲,层叠机制是处理对文档上应用样式时解决 ...

  7. JS取地址栏参数的两种方法

    第一种方法: function GetQueryString(name){ var reg = new RegExp("(^|&)"+ name +"=([^&a ...

  8. JavaScript基本概念（变量和数据类型）

    1. 变量 在局部作用域中省略var操作符可以定义全局变量,但是这么做会导致该变量难以维护,且在严格模式下会导致抛出ReferenceError错误. 2. 数据类型(js共用6种数据类型,分别是 U ...

  9. 4x4矩阵键盘扫描

    4x4矩阵键盘扫描 Windows 10 IoT Core 是微软针对物联网市场的一个重要产品,与以往的Windows版本不同,是为物联网设备专门设计的,硬件也不仅仅限于x86架构,同时可以在ARM架 ...

  10. SQL Server 移动master 数据库

    第一步: 告诉SQL Server 下次启动时master数据库的文件在哪里!我想们一定想到了(这样做是不对的,它对master不起作用,第二步开始正确的做法) alter database mast ...