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入门教程(10) 认识其他对象
Jan 31 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
基于Vue的侧边目录组件的实现
Feb 05 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 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
多文件上传的例子
2006/10/09 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
js对象的比较
2011/02/26 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
化工工艺专业求职信
2013/09/22 职场文书
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
品牌服务方案
2014/06/03 职场文书
2015年体育部工作总结
2015/04/02 职场文书
民事代理词范文
2015/05/25 职场文书
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS