html5——自定义属性
2024-10-08 00:24:43
自定义属性:添加前缀“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属性上。
最新文章
- 使用shell/python获取hostname/fqdn释疑
- git log命令全解析,打log还能这么随心所欲!
- 与JSP的初次邂逅……
- OpenCV安装配置的简单记录
- 在unity5中减少Draw Calls(SetPass Calls)[转]
- unity, 在保持场景根节点Transform不变且Hierarchy结构不变的前提下整体旋转场景
- 零基础学通C语言,福利来啦!!!!zfhl.ke.qq.com
- 数据表列名与数据库关键字冲突,在Hibernate下的解决办法
- 【开源java游戏框架libgdx专题】-13-开发工具-地图的使用
- Socket缓冲区探讨,是否有拆包的方式?
- Swift和C#的基本语法对比
- c#编写的基于Socket的异步通信系统
- 基于ES6模块标准通过webpack打包HTM5项目
- Trie模版
- 桂林电子科技大学第三届ACM程序设计竞赛 G 路径
- python字符串 列表 元组 字典相关操作函数总结
- realloc 用方法
- 一个强大的VS代码搜索工具
- 微信小程序API 登录-wx.login(OBJECT) + 获取微信用户唯一标识openid | 小程序
- 【三】jquery之选择器