html5 可以为元素添加自定义属性,但是要添加前缀data-。(下面这个例子中的自定义属性的命名,其实是不规范的,不应该包含大写字符,例如:data-myName 应改命名为:data-myname. 应为我们在维护别人的代码,所以就会遇到如下的问题。)

  <div class="disabled myClass" id="mDiv" data-appId='' data-myName="mDiv">class test</div>

定义好属性之后该如何访问属性呢,有两种方式:1.通过元素的dataset 属性来直接访问属性值。这也就是可能会有问题的地方!!! 使用下面的代码执行不成功。

                var div = document.getElementById("mDiv");
alert(div.dataset.appId);//undefined
alert(div.dataset.myName);//undefined

正确的代码:

                var div = document.getElementById("mDiv");
alert(div.dataset.appid);//
alert(div.dataset.myname);//mDiv

为了省去不必要的麻烦,推荐做法 是使用getAttribute() 自己来取值(俗话说自己动手丰衣足食):

var div = document.getElementById("mDiv");
var temp = div.getAttribute("data-appId");
alert(temp);//123456

<b>test</b>

Html5 自定义数据属性的更多相关文章

  1. html5 自定义数据属性 ,也就是 data-* 自定义属性---笔记。

    html5  自定义数据属性 ,也就是 data-* 自定义属性.  例如 <div data-last-value="43" data-hidden="true& ...

  2. 如何使用HTML5自定义数据属性

    在本文中,我将向你介绍如何使用HTML5自定义数据属性.我还将向你介绍一些开发人员在工作中经常使用的优秀实例. 为什么需要自定义数据属性? 很多时候我们需要存储一些与不同DOM元素相关联的信息.这些信 ...

  3. 【翻译】详解HTML5 自定义 Data 属性

    原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的, ...

  4. HTML5自定义select标签样式的方法

    HTML5自定义select标签样式的方法 -webkit-appearance: none; 这个东西可以隐藏箭头 不过手机端就直接 设置透明度为0就行了(如果这种做法比前面个要麻烦点 毕竟还要对他 ...

  5. 基于HTML5自定义文字背景生成QQ签名档

    分享一款利用HTML5实现的自定义文字背景应用,首先我们可以输入需要显示的文字,并且为该文字选择一张背景图片,背景图片就像蒙版一样覆盖在文字上.点击生成QQ签名档即可将文字背景融为一体生成另外一张图片 ...

  6. html5 自定义验证信息

      h5 为表单新增了很多类型,及属性. 根据这些新增的类型及属性 h5也为我们提供了验证这些数据的js函数,这些验证表单的函数都存在了ValidityState对象中,接下来让我们一起来了解一下这些 ...

  7. HTML5自定义data属性

    可能大家在使用jquery mobile时,经常会看到data-role.data-theme等的使用,比如:通过如下代码即可实现页眉的效果: [html] <div data-role=&qu ...

  8. 【转载】HTML5自定义data属性

    可能大家在使用jquery mobile时,经常会看到data-role.data-theme等的使用,比如:通过如下代码即可实现页眉的效果:   [html]  <div data-role= ...

  9. html5 自定义标签取值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Logstash 默认不处理一天前的文件

    The default behavior of the file input plugin is to ignore files whose last modification is greater ...

  2. 使用jpeglib库实现bmp转jpg

    一.vc编译jpeglib库 1.下载源代码 下载地址:http://www.ijg.org/.注意:一定要下载win32 版本 2.编译源代码. A.解压源代码,修改源代码中jconfig.vc为j ...

  3. ArcGIS学习推荐基础教程摘录

    ###########-------------------摘录一--------------------------########### ***************************** ...

  4. [置顶] 浅析objc的消息机制

    学习ios的同学都知道ojbc一种runtime的语言,runtime表明函数的真正执行的时候来确定函数执行的.这样的好处就是我们能很灵活的设计我们的代码,也能在看似合法的情况下做一些非常有意思的事情 ...

  5. INPUT[type=file]的change事件不触发问题

    在网页上要操作文件通常会使用INPUT[type=file]控件,但这个控件的设计很蛋疼.它不像其它编程语言中文件选择后会触发一个事件,只是让上面的文字改变,而这个改变可能会触发change事件而已. ...

  6. SQL SERVER2012 无法连接远程服务器

    SQL SERVER2012 无法连接远程服务器,报"尝试读取受保护的内存"错误. 解决方法: 运行CMD,输入 netsh winsock reset,回车.重启SSMS,搞定.

  7. CentOS6.3下搭建vsftpd(采用虚拟用户设置)

    CentOS6.3如果在安装的时候所有安装选项都打勾的话就含有单间vsftpd必备的软件:vsftpd.pam*.db4* 检查是否安装: [root@centos6 ~]# rpm -qa | gr ...

  8. U3D学习使用笔记(一)

    1.在使用NGUI控件时出现两种回调函数,一种是直接给回调函数赋值,一种是使用EventDelegate. UISlider.onDragFinished = functionName; EventD ...

  9. mysql5.1 有什么新特性

    本章介绍 新特性和已过时的特性 新特性: 1.分隔 这个特性允许把一个表里的部分数据放入文件系统中,它会根据表的创建规则来存储,一个表的不同部分被存储在不同的物理地址下.不过这个特性对于用户是不可见的 ...

  10. Android 多状态按钮 ToggleButton

    ToggleButton      选中状态,未选中状态并且需要为不同的状态设置不同的显示文本.      属性:           checked="true"         ...