html5——自定义属性
自定义属性:添加前缀“data-”
dataset属性:添加自定义属性后,通过元素的dataset属性来访问自定义属性的值(属性名没有data-前缀)
data-name:dataset.name
data-name-first:dataset.nameFirst
html结构:
<div id="div1" data-name="china" data-name-all="chinese">div</div>
1.利用 getAttribute、setAttribute 存取 dataset
var oDiv = document.getElementById("div1"); //get
console.log(oDiv.getAttribute("data-name")); // china
console.log(oDiv.getAttribute("data-name-all")); // chinese //set
oDiv.setAttribute("data-name","hello");
oDiv.setAttribute("data-name-all","hi");
这样就可以以一种更兼容的方式,来存取dataset数据。所做出的任何更改,都是可以实时反映到元素data属性上的。
但是这种方法比较低端,如果遇到多个data-*自定义字段,想要一次全部获取所有的data属性并包装成对象的话,还必须做一个循环,很麻烦。
2.利用 dataset API 存取 dataset
var oDiv = document.getElementById("div1"); //get
console.log(oDiv.dataset.name); // china
console.log(oDiv.dataset.nameAll); // chinese //set
oDiv.dataset.name = 'hello';
oDiv.dataset.nameAll = 'hi';
3.利用 jQuery.attr 方法存取 dataset
//get
console.log($('#div1').attr('data-name')); // china
console.log($('#div1').attr('data-name-all')); // chinese //set
$('#div1').attr('data-name', 'hello');
$('#div1').attr('data-name-all', 'hi');
4.利用 jQuery.data 方法存取 dataset
//get
console.log($('#div1').data('name')); // china
console.log($('#div1').data('nameAll')); // chinese //set
$('#div1').data('name', 'hello');
$('#div1').data('nameAll', 'hi');
这样的方法也能出色的存取data属性,但是需要注意,jQuery.data对data数据做出的更改,不会反映到HTML元素data属性上。
html5——自定义属性的更多相关文章
- HTML5自定义属性对象Dataset简介
一.html5 自定义属性介绍 我之前翻译的“你必须知道的28个HTML5特征.窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍,就是在HTML5中我们可以使用data-前缀设 ...
- Jquery 操作HTML5自定义属性data-*
HTML5自定义属性规范的写法<a data-roleid="12"></a>,也可以直接写<a roleid="12">& ...
- HTML5 自定义属性 data-*属性名一定要小写吗?
最近学习 javascript ,参考书籍是< javascript 高级程序设计>第三版,在介绍自定义元素属性时书中给出了一个例子,如下:<div id="myDiv&q ...
- HTML5自定义属性操作
一.自定义属性(html5标准)data-属性名称="属性值" 自定义属性的名称驼峰式命名规则需要用-隔开 自定义属性名称如果连在一起写,大写会自动转为小写 data-user=& ...
- HTML5自定义属性之data-*
HTML5 增加了一项新功能是 自定义数据属性 ,也就是 data-* 自定义属性.在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放.当然高级浏览器下 ...
- HTML5 自定义属性 data-*介绍
在HTML5之前HTML4我们也可以自定义属性通过setAttribute去设置或者直接写在HTML标签里面那么HTML5新增data-*(*可以替换成你喜欢的任意名字)属性有什么用呢? 更便的捷操作 ...
- HTML5 自定义属性
先声明 HTML5的自定义属性浏览器支持性不太好 目前只有firefox6+和chrome浏览器支持 元素除了自带的属性外 另外也可以加自定义属性 不过需要在前面加上data- 下面举个例子 ...
- HTML5自定义属性的设置与获取
<div id="box" aaa="bbb" data-info="hello"></div> <body& ...
- HTML5 自定义属性 data-* 和 jQuery.data 详解
新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取.它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置.这使得dat ...
随机推荐
- linux内核分析作业4:使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用
系统调用:库函数封装了系统调用,通过库函数和系统调用打交道 用户态:低级别执行状态,代码的掌控范围会受到限制. 内核态:高执行级别,代码可移植性特权指令,访问任意物理地址 为什么划分级别:如果全部特权 ...
- Codeforces Good Bye 2016 D 模拟搜索?
给出烟花的爆炸方式和爆炸次数 问最后有多少个格子会被炸到 如果dfs的话会超时... 利用模拟每一层来搜索..? 思想就是一开始有一个爆炸点向上 然后模拟完第一段 会产生一个爆炸点 朝两个方向 就用v ...
- CentOS下PHP7的编译安装,MySQL的支持和一些问题的解决
最近试了一下PHP7,在编译和支持MySQL上都遇到一些问题,相信不少同学也同样遇到,所以在这里聊一下这个过程.简单来讲编译PHP7只需要3步: 1../buildconf --force 2../c ...
- 几何服务,cut功能,输入要素target(修改后)内容。
几何服务,cut功能测试,输入要素target(修改后)内容. {"displayFieldName":"","fieldAliases": ...
- Xshell远程连接工具
下载地址:http://rj.baidu.com/soft/detail/15201.html?ald Xshell 是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft ...
- 给Source Insight做个外挂系列之二--将本地代码注入到Source Insight进程
上一篇文章介绍了如何发现正在运行的“Source Insight”窗口,本篇将介绍“TabSiPlus”是如何进行代码注入的.Windows 9x以后的Windows操作系统都对进程空间进行了严格的保 ...
- nginx配置之取消index.php同时不影响js,css功能
server { listen 8084; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; ...
- maven常用插件pom配置
一.问题描述: 部署一个maven打包项目时,jar包,依赖lib包全部手动上传至服务器,然后用maven部署报错:Exception in thread "main" java. ...
- 16C554(8250)驱动分析
参考: http://www.cnblogs.com/zym0805/p/4815041.html 一. 硬件数据手册 The ST16C554D is a universal asynchronou ...
- Lua参数绑定函数实现方法
背景 对于某一个函数, 其被调用多次, 每次调用的入参都是一致的. 不想每次都填写参数, 如果能够定义一个新的函数, 将参数跟此函数绑定就棒哒哒了. local function pirntfunc( ...