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 相关文章推荐
基于jQuery的自动完成插件
Feb 03 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
使用p5.js临摹动态图形
Oct 23 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
第1次亲密接触PHP5(1)
2006/10/09 PHP
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
Angular2库初探
2017/03/01 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
python3 实现口罩抽签的功能
2020/03/11 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
药学专业大专生的自我评价
2013/12/12 职场文书
财务会计实习报告体会
2013/12/20 职场文书
员工工作及收入证明
2014/10/28 职场文书
盲山观后感
2015/06/11 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android