Html5 自定义数据属性
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 自定义数据属性的更多相关文章
- html5 自定义数据属性 ,也就是 data-* 自定义属性---笔记。
html5 自定义数据属性 ,也就是 data-* 自定义属性. 例如 <div data-last-value="43" data-hidden="true& ...
- 如何使用HTML5自定义数据属性
在本文中,我将向你介绍如何使用HTML5自定义数据属性.我还将向你介绍一些开发人员在工作中经常使用的优秀实例. 为什么需要自定义数据属性? 很多时候我们需要存储一些与不同DOM元素相关联的信息.这些信 ...
- 【翻译】详解HTML5 自定义 Data 属性
原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的, ...
- HTML5自定义select标签样式的方法
HTML5自定义select标签样式的方法 -webkit-appearance: none; 这个东西可以隐藏箭头 不过手机端就直接 设置透明度为0就行了(如果这种做法比前面个要麻烦点 毕竟还要对他 ...
- 基于HTML5自定义文字背景生成QQ签名档
分享一款利用HTML5实现的自定义文字背景应用,首先我们可以输入需要显示的文字,并且为该文字选择一张背景图片,背景图片就像蒙版一样覆盖在文字上.点击生成QQ签名档即可将文字背景融为一体生成另外一张图片 ...
- html5 自定义验证信息
h5 为表单新增了很多类型,及属性. 根据这些新增的类型及属性 h5也为我们提供了验证这些数据的js函数,这些验证表单的函数都存在了ValidityState对象中,接下来让我们一起来了解一下这些 ...
- HTML5自定义data属性
可能大家在使用jquery mobile时,经常会看到data-role.data-theme等的使用,比如:通过如下代码即可实现页眉的效果: [html] <div data-role=&qu ...
- 【转载】HTML5自定义data属性
可能大家在使用jquery mobile时,经常会看到data-role.data-theme等的使用,比如:通过如下代码即可实现页眉的效果: [html] <div data-role= ...
- html5 自定义标签取值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- linux 命令之 uptime
uptime 命令是用来查询linux系统负载的. 命令格式 uptime [OPTION] -V 显示版本号 不带參数的 uptime 直接输出系统负载. 何为系统负载呢? 系统平均负载被定义为在特 ...
- Android创建启动画面[转]
每个Android应用启动之后都会出现一个Splash启动界面,显示产品的LOGO.公司的LOGO或者开发者信息.如果应用程序启动时间比较长,那么启动界面就是一个很好的东西,可以让用户耐心等待这段枯燥 ...
- 根据自己的需要适度使用Web开发框架
软件系统发展到今天已经很复杂了,特别是服务器端软件,涉及到的知识,内容,问题太多.Web开发框架能够帮我们大大减少工作量,但是我们应该如何正确看待Web开发框架,并且如何去使用他们呢? 对框架的依赖 ...
- 不能以方法的方式使用不可调用的“system.web.httprequest.querystring”
问题描述:不能以方法的方式使用不可调用的“system.web.httprequest.querystring”解决办法:Request.QueryString["GoodsID" ...
- Python核心编程读笔 11:模块
第12章 模块 1.基本概念 模块的文件名就是模块名字.py 每个模块都定义了自己唯一的名称空间 模块的搜索路径:会被保存在 sys 模块的 sys.path 变量里 >>>sys. ...
- leetcode Search Insert Position Python
#Given a sorted array and a target value, return the index if the target is found. If #not, return t ...
- Android Studio Module疑问
ERROR: APK path is not specified for module From your existing project, go to 'File' -> 'Project ...
- 【转】MUD教程--巫师入门教程1
<新巫师入门手册> 第一章:观念篇■ 内容提要:什么是巫师?怎样做一个巫师?如何做好一个巫师? 第二章:上手篇■ 内容提要:最简单的房间怎么写?NPC又怎么写?先看懂一些常用的参数? 第三 ...
- spoj COT2 - Count on a tree II 树上莫队
题目链接 http://codeforces.com/blog/entry/43230树上莫队从这里学的, 受益匪浅.. #include <iostream> #include < ...
- HTTP请求大全
1xx - 信息提示这些状态代码表示临时的响应.客户端在收到常规响应之前,应准备接收一个或多个 1xx 响应.100 - 继续101 - 切换协议 2xx - 成功这类状态代码表明服务器成功地接受了客 ...