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面向对象之Javascript 继承
May 04 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
基于D3.js实现时钟效果
Jul 17 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
小程序实现分类页
Jul 12 Javascript
对TypeScript库进行单元测试的方法
Jul 18 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 表单提交及处理表单数据详解及实例
2016/12/27 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
图片之间的切换
2006/06/26 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
python文件与目录操作实例详解
2016/02/22 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
python中spy++的使用超详细教程
2021/01/29 Python
Python中Qslider控件实操详解
2021/02/20 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
课程设计心得体会
2013/12/28 职场文书
母亲追悼会答谢词
2014/01/27 职场文书
教师自我鉴定范文
2014/03/20 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
成都人事代理协议书
2014/10/25 职场文书
同学聚会通知书
2015/04/20 职场文书
离职信范文
2015/06/23 职场文书
2015国庆节宣传语
2015/07/14 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
争做文明公民倡议书
2019/06/24 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang