JS实现获取自定义属性data值的方法示例


Posted in Javascript onDecember 19, 2018

本文实例讲述了JS实现获取自定义属性data值的方法。分享给大家供大家参考,具体如下:

HTML部分:

<div id="tree" data-leaves="47" data-plant-height="2.4m"></div>

js部分:

var tree = document.getElementById("tree");
//getAttribute()取值属性
console.log(tree.getAttribute("data-leaves"));
console.log(tree.getAttribute("data-plant-height"));
//setAttribute()赋值属性
tree.setAttribute("data-leaves","48");
//data-前缀属性可以在JS中通过dataset取值,更加方便
console.log(tree.dataset.leaves);
console.log(tree.dataset.plantHeight);
//赋值
tree.dataset.plantHeight = "3m";
tree.dataset.leaves--;
//新增data属性
tree.dataset.age = "100";
//删除,设置成null,或者delete
tree.dataset.leaves = null;
delete tree.dataset.age;

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码可得如下运行结果:

JS实现获取自定义属性data值的方法示例

jQuery的data方法

var $tree = $('#tree');
console.log($tree.data("plant-height"));

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码可得如下运行结果:

JS实现获取自定义属性data值的方法示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
用 javascript 实现的点击复制代码
Mar 24 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
详解vuejs之v-for列表渲染
Jun 22 Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
详解uniapp的全局变量实现方式
Jan 11 Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 #Javascript
js指定日期增加指定月份的实现方法
Dec 19 #Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 #Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 #Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 #Javascript
JS监听滚动和id自动定位滚动
Dec 18 #Javascript
JS实现的tab页切换效果完整示例
Dec 18 #Javascript
You might like
php中看实例学正则表达式
2006/12/25 PHP
php学习之function的用法
2012/07/14 PHP
PHP获取文件行数的方法
2015/06/10 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
基于jQuery的js分页代码
2010/06/10 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
美国家具网站:Cymax
2016/09/17 全球购物
中国医药集团国药在线:国药网
2017/02/06 全球购物
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
银行办公室岗位职责
2014/03/10 职场文书
任命书模板
2014/06/04 职场文书
公司任命书模板
2014/06/06 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
保卫工作个人总结
2015/03/03 职场文书
公司开会通知
2015/04/20 职场文书
新教师教学工作总结
2015/08/12 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis