全栈JavaScript之路(十八)HTML5 自己定义数据属性
HTML5 规范规定,用户能够为元素 自己定义非标准属性, 可是要加入 data- 前缀。
目的是为元素提供与页面渲染无关的信息、或者语义信息。这些属性名能够任意加入,仅仅要带上前缀 data- 开头就能够。
<div id="myid" data-appid="1" data-appname="csdn"></div>
加入属性这后能够通过 dataset 訪问自己定义属性,dataset 属性 是DOMStringMap 类型的实例。 也是一个 key : value 的键值对。
注冊:每个data-name 形式的属性 相应。 dataset 的 name 属性。
以上面的样例来说;
var div = document.getElementById("myid");
div.dataset.appid ===' 1'; //true
div.dataset.appname ==='nama';//true
能够设置自己定义属生的值:
div.dataset.appid = "100"
全栈JavaScript之路(十八)HTML5 自己定义数据属性的更多相关文章
- 全栈JavaScript之路(十九)HTML5 插入 html标记 ( 一 )innerHTML 与outerHTML
在须要给文档插入大量的html 标记下.通过DOM操作非常麻烦,你不仅要创建一系列的节点,并且还要小心地依照顺序把它们接结起来. 利用html 标签 插入技术,能够直接插入html代码字符串,简单.高 ...
- 全栈JavaScript之路(十六)HTML5 HTMLDocument 类型的变化
HTML5 扩展了 HTMLDocument, 添加了新的功能. 1.document.readState = 'loading' || 'complete' //支持readyState 属性的浏 ...
- 全栈JavaScript之路( 二十 )HTML5 插入 html标记 ( 二 )insertAdjacentHTML
insertAdjacentHTML(), 这种方法也是在IE中最早出现的.如今已纳入html5规范,它接受两个參数,一个是下列的标记之中的一个,一个是要写入的 html 代码文本. beforeb ...
- 全栈JavaScript之路(十四)HTML5 中与class属性相关的扩充
1. getElementByClassName() :支持getElementsByClassName()方法的浏览器有IE 9+.Firefox 3+.Safari 3.1+.Chrome 和 O ...
- 全栈JavaScript之路(十七)HTML5 新增字符集属性
HTML5 添加�了几个文档字符集属性. document.charset : 表示文档的实际使用的字符集. document.defaultCharset: 表示默认的字符集,跟浏览器以及操作系统设 ...
- 全栈JavaScript之路( 二十二 )IE 专有扩展——文档模式
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/hatmore/article/details/37611911 ie8 引入了一个新的概念.&quo ...
- 全栈JavaScript之路( 二十五 )訪问元素的样式
不论什么支持style 特性的元素在 ,在其DOM 节点 对象中都有一个 style 属性与之相应. 这个style 对象是 CSSStyleDeclaration类型的实例,包括着html sty ...
- 全栈JavaScript之路( 二十四 )DOM2、DOM3, 不涉及XML命名空间的扩展
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/hatmore/article/details/37658167 (一)DocumentType 类型 ...
- 全栈JavaScript之路(十)学习 DocumentFragment 类型 节点
DocumentFragment 类型节点,代表一个文档片段,是一种轻量级的'文档' 对象.能够包括其他类型节点,并有能力訪问.操作当中的节点,可是在文档中没有文档标记,相当于是一个页面不可见的容器. ...
随机推荐
- 小型Mp3播放器
准备三张图片,名字分别为: play.pause.stop. 将一个名为Mp3的文件放入res/raw文件夹中. 在main.xml中: <LinearLayout xmlns:android= ...
- hdu 1760 一道搜索博弈题 挺新颖的题目
A New Tetris Game Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- 简单的javascript抽奖程序
<html> <head> <title>手机号码抽奖程序</title> <script> //声明一个数组装住号码,可根 ...
- Android 带你从源码的角度解析Scroller的滚动实现原理
转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17483273),请尊重他人的辛勤劳动成果,谢谢! 今天给大 ...
- asp.net笔试题
1. 简述 private. protected. public. internal 修饰符的访问权限. 答 . private : 私有成员, 在类的内部才可以访问. protected : 保护成 ...
- 党建凯,创新工场知乎团队Web前端工程师
Nicholas C. Zakas谈怎样才能成为优秀的前端工程师: 昨天,我负责了Yahoo!公司组织的一次面试活动,感触颇深的是其中的应聘者提问环节.我得说自己对应聘者们提出的大多数问题都相当失望. ...
- Lucene之删除索引
1.前言 之前的博客<Lucene全文检索之HelloWorld>已经简单介绍了Lucene的索引生成和检索.本文着重介绍Lucene的索引删除. 2.应用场景: 索引建立完成后,因为有些 ...
- android Activity切换动画效果
为Activity设置左右进出的效果,能够通过在Mainfest.xml文件里设置主题的方式来实现.还能够使用java代码. 一.设置样式 先看看实现动画的样式: <style name=&qu ...
- Substrings 第37届ACM/ICPC 杭州赛区现场赛C题(hdu 4455)
http://acm.hdu.edu.cn/showproblem.php?pid=4455 https://icpcarchive.ecs.baylor.edu/index.php?option=c ...
- libevent简单分析
一看名字就知道是围绕eventloop转的. 那首先肯定是eventloop是个什么?一般都是IO事件,timer事件的管理器. 那首先看如何new出来一个eventloop: 1.因为libeven ...