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 ...
随机推荐
- MySQL RR隔离 读一致性
MySQL RR 模式下 事务隔离问题: Session 1: mysql> select * from test; +------+------+ | id | name | +------+ ...
- tracker-store and tracker-miner-fs eating up my CPU on every startup
Tracker is a synergy of technologies that are designed to provide a highly sophisticated, innovative ...
- 转发:为什么Android使用弱加密算法?
Android 2.2.1默认使用的加密算法是AES 256-SHA1,但从2010年发布的Android 2.3开始,它默认使用的是一种更弱的加密算法 RC4-MD5. 当Android应用建立 ...
- Android不规则瀑布流照片墙的实现+LruCache算法
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZnJhbmNpc3NoaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- Swift中编写单例的正确方式
在之前的帖子里聊过状态管理有多痛苦,有时这是不可避免的.一个状态管理的例子大家都很熟悉,那就是单例.使用Swift时,有许多方法实现单例,这是个麻烦事,因为我们不知道哪个最合适.这里我们来回顾一下单例 ...
- EF 6.0使用小计
---恢复内容开始--- 最近尝试了下EF Extended,但是居然需要EF6.0以上,没办法,只能安装了,打开解决方案,选择库程序包管理下的程序包管理控制台(或者直接右击你需要使用扩展的解决方案选 ...
- C#程序之Main()方法
一.Main()方法的简介 1.一般情况下,一个C#可执行程序只有一个应用程序对象(也就是就程序入口),但是在某些情况,可能会有多个应用程序对象(程序入口),如单元测试中,这个时候我们就需要通过命令行 ...
- Matlab基础知识
一.常用命令:普通的如cd.ls和linux下一样 clc:清除工作窗口中的所有显示内容 clf:清除图形窗口 whos:列出当前工作空间中所有变量,以及它们的名字.尺寸(比如一个矩阵或数组的行列维数 ...
- leetcode Sudoku Solver python
#the define of Sudoku is on this link : http://sudoku.com.au/TheRules.aspx Write a program to solve ...
- Storm基础理论
Storm流式计算基础 .note-content {font-family: "Helvetica Neue",Arial,"Hiragino Sans GB" ...