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 相关文章推荐
跨域表单提交状态的变相判断代码
Nov 12 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
javascript arguments使用示例
Dec 16 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
微信小程序 this.triggerEvent()的具体使用
Dec 10 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
javascript数组includes、reduce的基本使用
Jul 02 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
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
php的curl封装类用法实例
2014/11/07 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
jQuery live
2009/05/15 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
JS判定是否原生方法
2013/07/22 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
Python深度优先算法生成迷宫
2018/01/22 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
小学毕业感言150字
2014/02/05 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
教师节演讲稿
2014/05/06 职场文书
认真学习保证书
2015/02/26 职场文书
趣味运动会广播稿
2015/08/19 职场文书
python ConfigParser库的使用及遇到的坑
2022/02/12 Python