JS实现获取自定义属性data值的方法示例
更新时间：2018年12月19日 08:41:44 作者：天涯海角路
这篇文章主要介绍了JS实现获取自定义属性data值的方法,结合实例形式较为详细的分析了javascript针对自定义属性data的相关操作技巧,需要的朋友可以参考下
本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码可得如下运行结果：
jQuery的data方法
var $tree = $('#tree');
console.log($tree.data("plant-height"));
使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码可得如下运行结果：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
搞定js的加密和压缩，一方面可以提高页面加载性能，另外一方面也希望辛苦研发出来的成果得到一定的保护,感兴趣的朋友可以了解下，或许对你有所帮助2013-01-01
js+html5获取用户地理位置信息并在Google地图上显示的方法
这篇文章主要介绍了js+html5获取用户地理位置信息并在Google地图上显示的方法,涉及html5元素的操作技巧,需要的朋友可以参考下2015-06-06
浅析jsopn跨域请求原理及cors（跨域资源共享）的完美解决方法
由于同源策略的缘故，ajax不能向不同域的网站发出请求。接下来通过本文给大家介绍jsopn跨域请求原理及cors（跨域资源共享）的完美解决方法,需要的朋友可以参考下2017-02-02
js实现base64、url和blob之间相互转换的3种方式举例
在JavaScript中将图片的绝对路径转换为base64字符串或blob对象,是常见的图片上传前的预处理步骤,这篇文章主要介绍了js实现base64、url和blob之间相互转换的3种方式,需要的朋友可以参考下2025-04-04
在开发uniapp应用时,可能会遇到文件上传功能在iOS和部分Android手机上不兼容的问题,经过对比分析,发现问题可能出在文件的路径上,通过使用uni.saveFile方法保存文件后,再上传可以解决问题,这篇文章详细介绍了解决方案,并引导读者参考更多相关内容2024-09-09
详解JavaScript中Proxy与Object.defineProperty的区别
Proxy和Object.defineProperty都是JavaScript中用于实现对象属性拦截和代理的机制，但它们在功能和应用方面有一些区别，本文通过代码示例详细介绍了二者的区别,感兴趣的朋友可以参考下2023-06-06
这篇文章主要介绍了Bootstrap风格的zTree右键菜单功能，实现代码分为html，css和js三部分，代码简单易懂，非常不错，需要的朋友可以参考下2017-02-02
这篇文章主要为大家详细介绍了原生js实现简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要为大家详细介绍了JS实现随机抽奖小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
今天小编就为大家分享一篇LayUi中接口传数据成功,表格不显示数据的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论