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. iOS的category和protocol

    很多时候我们需要扩展一下现有的类,增加一点功能.如果有源码,修改一下即可,如果是第三方的库,就要麻烦一些.在C++中我们使用类继承的方法来实现,在ObjectiveC中当然也可以这么做,不过Objec ...

  2. denoising autoencoder

    神经网络的挑战和关键技术: 1.神经网络结构决定(层,神经元,连接)    加入特定领域的知识(CNN 图片处理) 2.模型复杂度高    大的数据量:    regularization:  dro ...

  3. mvc mvp mvvm区别

    1 mvc是有视图(view),控制器(controller),模型(model)组成 view(用户界面) controller (业务逻辑)            model(数据存储) 接受指令 ...

  4. Colorbox cannot load the image added by js

    As we know, Colorbox is a wonderful js plugin. I came up against a head-banged problem in v1.5.6. Wh ...

  5. Linux--根文件系统的挂载过程分析

    前言: 本篇文章以S3C6410公版的Linux BSP和U-Boot来进行分析,文中全部提及的名词和数据都是以该环境为例,全部的代码流程也是以该环境为例来进行分析.哈哈.假设有不对或者不完好的地方, ...

  6. html系列教程--span style 及表格标签 title video

    <span> 标签:非块状元素,用于文本描述 <style> 标签:内联样式表标签定义样式信息,必须写明type类型为text/css,建议写在head中,不是必须 demo: ...

  7. js实现睡眠

    //js暂停函数 function Pause(obj, iMinSecond) { if (window.eventList == null) window.eventList = new Arra ...

  8. the C programming language 阅读笔记2

    1. 指针 1.1 自增符的使用 ++*p;//p指向的内容加一 (*p)++; //p指向的内容加一 *p++;//p本身自增 *++p; //p本身自增 因为诸如*和++这样的一元运算符在表达式求 ...

  9. win7_32位安装MySQL_5.6以及密码修改方法

    1.下载mysql: http://www.xiazaiba.com/html/361.html 2.安装 方便起见,全部默认下一步吧,原理一个样,最后安装到: 3.配置环境变量 我这里添加的是  C ...

  10. 6. java.lang.IllegalArgumentException

    方法的参数错误 比如g.setColor(int red,int green,int blue)这个方法中的三个值,如果有超过255的也会出现这个异常,因此一旦发现这个异常,我们要做的,就是赶紧去检查 ...