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单行文字向上滚动效果的实现代码
Sep 05 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
vue调用语音播放的方法
Sep 27 Javascript
JS实现简易留言板(节点操作)
Mar 16 Javascript
Html5生成验证码的示例代码
May 10 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
PHP5 安装方法
2007/01/15 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
使用Python获取Linux系统的各种信息
2014/07/10 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
小学兴趣小组活动总结
2014/07/07 职场文书
人力资源职位说明书
2014/07/29 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
小学生成绩单评语
2014/12/31 职场文书
小学重阳节活动总结
2015/03/24 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
美容院员工规章制度
2015/08/05 职场文书
小学安全教育主题班会
2015/08/12 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
聊一聊python常用的编程模块
2021/05/14 Python
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
Java实现聊天机器人完善版
2021/07/04 Java/Android