HTML5 自定义属性 dataset

dataset 属性的 值是 DOMStringMap 的一个实例,也就是一个名值对儿的映射。

在这个映射中,每个 data-name 形式 的属性都会有一个对应的属性,只不过属性名没有 data-前缀

//本例中使用的方法仅用于演示
var div = document.getElementById("myDiv");
//取得自定义属性的值
var appId = div.dataset.appId;
var myName = div.dataset.myname;
//设置值
div.dataset.appId = 23456;
div.dataset.myname = "Michael";
//有没有"myname"值呢?
if (div.dataset.myname){
 alert("Hello, " + div.dataset.myname);
} 
时间: 2024-07-31 14:30:24

HTML5 自定义属性 dataset的相关文章

HTML5自定义属性对象Dataset

原文转自HTML5自定义属性对象Dataset简介 一.html5 自定义属性介绍 之前翻译的“你必须知道的28个HTML5特征.窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍,就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放,例如我们要在一个文字按钮上存放相对应的id: <a href="javascript:" data-id="2312">测试</a> 这里的data-

HTML5自定义属性对象Dataset简介

一.html5 自定义属性介绍 之前翻译的“你必须知道的28个HTML5特征.窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍,就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放,例如我们要在一个文字按钮上存放相对应的id: 测试 这里的data-前缀就被称为data属性,其可以通过脚本进行定义,也可以应用CSS属性选择器进行样式设置.数量不受限制,在控制和渲染数据的时候提供了非常强大的控制. 二.Dataset基础 下面是元素应用

HTML5 自定义属性 data-*属性名一定要小写吗?

最近学习 javascript ,参考书籍是< javascript 高级程序设计>第三版,在介绍自定义元素属性时书中给出了一个例子,如下:<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div> 理想情况下可以通过 myDiv.dataset.appId, myDiv.dataset.myname 访问数据,但是在实际测试的时候发现 ap

Jquery 操作HTML5自定义属性data-*

HTML5自定义属性规范的写法<a data-roleid="12"></a>,也可以直接写<a roleid="12"></a>,但是这样写很容易被其他脚本过滤掉了,实际上也不符合HTML规范 jQuery获取自定义属性值方法: $('a').data('roleid')  ,或者直接这样写也行:$('a').attr('data-roleid')

HTML5自定义属性的设置与获取

<div id="box" aaa="bbb" data-info="hello"></div> <body> <script> var box = document.getElementsByTagName("div")[0]; console.log(box.dataset['info']); console.log(box.id);//box console.log(box

HTML5自定义属性之data-

HTML5 增加了一项新功能是 自定义数据属性 ,也就是  data-* 自定义属性.在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放.当然高级浏览器下可通过脚本进行定义和数据存取.在项目实践中非常有用. <input type="button" value="按钮" data-index="10" data-index-color="red" > 在开始之前我们先来

html5——自定义属性

自定义属性:添加前缀"data-" dataset属性:添加自定义属性后,通过元素的dataset属性来访问自定义属性的值(属性名没有data-前缀) data-name:dataset.name data-name-first:dataset.nameFirst html结构: 1 <div id="div1" data-name="china" data-name-all="chinese">div</d

HTML5 自定义属性 data-* 和 jQuery.data 详解

新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取.它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置.这使得data属性特别灵活,也非常强大.有了这样的属性我们能够更加有序直观的进行数据预设或存储.下面介绍HTML5 Dataset 存储的实际应用,以及包括jQuery在内的四种存取方式. HTML5 Dataset 存储的例子 为一个元素分配data属性存储数据,例如这是一个span元素,它的内容是一首音乐的

jQuery中使用data()方法读取HTML5自定义属性data-*实例

如果你使用jQuery类库,那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性,方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险 主要的方法如下: 复制代码代码如下: .data( key, value ).data( obj ).data( key ).data() 从jQuery 1.4.3起, HTML 5 data- 属性 将自动被引用到jQuery的数据对象中.例如HTML: 复制代码代码如下: <div data-role =