自定义属性:添加前缀“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——自定义属性的更多相关文章

  1. HTML5自定义属性对象Dataset简介

    一.html5 自定义属性介绍 我之前翻译的“你必须知道的28个HTML5特征.窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍,就是在HTML5中我们可以使用data-前缀设 ...

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

    HTML5自定义属性规范的写法<a data-roleid="12"></a>,也可以直接写<a roleid="12">& ...

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

    最近学习 javascript ,参考书籍是< javascript 高级程序设计>第三版,在介绍自定义元素属性时书中给出了一个例子,如下:<div id="myDiv&q ...

  4. HTML5自定义属性操作

    一.自定义属性(html5标准)data-属性名称="属性值" 自定义属性的名称驼峰式命名规则需要用-隔开 自定义属性名称如果连在一起写,大写会自动转为小写 data-user=& ...

  5. HTML5自定义属性之data-*

    HTML5 增加了一项新功能是 自定义数据属性 ,也就是  data-* 自定义属性.在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放.当然高级浏览器下 ...

  6. HTML5 自定义属性 data-*介绍

    在HTML5之前HTML4我们也可以自定义属性通过setAttribute去设置或者直接写在HTML标签里面那么HTML5新增data-*(*可以替换成你喜欢的任意名字)属性有什么用呢? 更便的捷操作 ...

  7. HTML5 自定义属性

    先声明  HTML5的自定义属性浏览器支持性不太好   目前只有firefox6+和chrome浏览器支持 元素除了自带的属性外 另外也可以加自定义属性   不过需要在前面加上data- 下面举个例子 ...

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

    <div id="box" aaa="bbb" data-info="hello"></div> <body& ...

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

    新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取.它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置.这使得dat ...

随机推荐

  1. linux内核分析作业4:使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用

    系统调用:库函数封装了系统调用,通过库函数和系统调用打交道 用户态:低级别执行状态,代码的掌控范围会受到限制. 内核态:高执行级别,代码可移植性特权指令,访问任意物理地址 为什么划分级别:如果全部特权 ...

  2. Codeforces Good Bye 2016 D 模拟搜索?

    给出烟花的爆炸方式和爆炸次数 问最后有多少个格子会被炸到 如果dfs的话会超时... 利用模拟每一层来搜索..? 思想就是一开始有一个爆炸点向上 然后模拟完第一段 会产生一个爆炸点 朝两个方向 就用v ...

  3. CentOS下PHP7的编译安装,MySQL的支持和一些问题的解决

    最近试了一下PHP7,在编译和支持MySQL上都遇到一些问题,相信不少同学也同样遇到,所以在这里聊一下这个过程.简单来讲编译PHP7只需要3步: 1../buildconf --force 2../c ...

  4. 几何服务,cut功能,输入要素target(修改后)内容。

    几何服务,cut功能测试,输入要素target(修改后)内容. {"displayFieldName":"","fieldAliases": ...

  5. Xshell远程连接工具

    下载地址:http://rj.baidu.com/soft/detail/15201.html?ald Xshell 是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft ...

  6. 给Source Insight做个外挂系列之二--将本地代码注入到Source Insight进程

    上一篇文章介绍了如何发现正在运行的“Source Insight”窗口,本篇将介绍“TabSiPlus”是如何进行代码注入的.Windows 9x以后的Windows操作系统都对进程空间进行了严格的保 ...

  7. nginx配置之取消index.php同时不影响js,css功能

    server { listen 8084; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; ...

  8. maven常用插件pom配置

    一.问题描述: 部署一个maven打包项目时,jar包,依赖lib包全部手动上传至服务器,然后用maven部署报错:Exception in thread "main" java. ...

  9. 16C554(8250)驱动分析

    参考: http://www.cnblogs.com/zym0805/p/4815041.html 一. 硬件数据手册 The ST16C554D is a universal asynchronou ...

  10. Lua参数绑定函数实现方法

    背景 对于某一个函数, 其被调用多次, 每次调用的入参都是一致的. 不想每次都填写参数, 如果能够定义一个新的函数, 将参数跟此函数绑定就棒哒哒了. local function pirntfunc( ...