这篇文章主要介绍了JS实现获取自定义属性data值的方法,结合实例形式较为详细的分析了javascript针对自定义属性data的相关操作,需要的朋友可以参考下

本文实例讲述了JS实现获取自定义属性data值的方法。分享给大家供大家参考,具体如下:

HTML部分:

<div id="tree"></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.lovean.com/code/HtmlJsRun测试上述代码可得如下运行结果:

jQuery的data方法

var $tree = $('#tree');
console.log($tree.data("plant-height"));

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.lovean.com/code/HtmlJsRun测试上述代码可得如下运行结果:

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript操作DOM总结》、《JavaScript页面元素操作总结》、《JavaScript事件相关操作与大全》、《JavaScript查找算法总结》、《JavaScript数据结构与算法总结》、《JavaScript遍历算法与总结》及《JavaScript错误与调试总结》

希望本文所述对大家JavaScript程序设计有所帮助。

最新资讯
消息称字节跳动2020年营收350亿美元 正寻求部分业务在港上市

消息称字节跳动2020年

知情人士透露,抖音母公司字节跳动有限公司(ByteDance )去
分析师预计特斯拉Q4将保持盈利能力 调整后每股收益将显著增长

分析师预计特斯拉Q4将

分析师预计,特斯拉将在2020年第四季度保持盈利能力,该公
华为云与计算BG人事调整 余承东兼任总裁

华为云与计算BG人事调

1月27日下午消息,华为今日内部发文宣布云与计算BG人事
特斯拉研究伙伴杰夫·达恩:将帮助特斯拉降低电池成本

特斯拉研究伙伴杰夫·

著名电池研究专家、特斯拉研究合作伙伴杰夫•达恩(Jef
响应“就地过年”:申通给快递员人均发2500元现金奖励

响应“就地过年”:申通

申通给出针对一线快递员的关怀政策:不打烊期间,由申通总
贴片“纹身”搞定疾病预警:石墨烯电子皮肤展现光明前景

贴片“纹身”搞定疾病

仅需在皮肤表面贴附一片薄薄的“纹身”,便可以实现心律
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,