<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<div id="tree" data-leaves="47" data-plant-height="2.4m"></div>

<script>

    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;

    //jQuery的data方法

    var $tree = $('#tree');

    console.log($tree.data("plant-height"));

</script>

</body>

</html>

js获取自定义data属性的更多相关文章

  1. js（jQuery）获取自定义data属性的值

    有时候因为需要在标签上设置自定义data属性值, <div class="col-sm-6 col-md-4" id="get_id" data-c_id ...

  2. js取自定义data属性

    //20170329 原本以为只能attr或者prop来获取属性,但是今天看别人的代码他自定义了一个属性,却取不到他的属性值,我自己在本地又可以取到,难道是phtml的原因,于是我到网上查找,发现了一 ...

  3. js 获取 this 的属性 obj[0].getAttribute

    js  获取 this 的属性 obj[0].getAttribute

  4. js获取对象的属性个数

    for (var i = 0; i < dt.length; i++) { if (Object.keys(dt[i]).length <= 1) { dt.splice(i, 1); i ...

  5. 获取自定义data的几种属性

    //获取data属性的几种方法 var id = this.getAttribute('data-id'); var id = $(this).attr('data-id'); var id = $( ...

  6. 【翻译】详解HTML5 自定义 Data 属性

    原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的, ...

  7. 【总结整理】js获取css的属性（内部，外部，内嵌（写在tag中））

    在JS中需要获取某个元素的宽高或者是绝对定位的位置信息,通常我们会这么写: var elemWidth = elem.style.width; console.log(elemWidth); //(空 ...

  8. js获取和设置属性的方法

    function square(num){    var total = num*num;//局部变量    return total;}var total = 50;//全局变量var number ...

  9. HTML5自定义data属性

    可能大家在使用jquery mobile时,经常会看到data-role.data-theme等的使用,比如:通过如下代码即可实现页眉的效果: [html] <div data-role=&qu ...

随机推荐

  1. ajax 携带参数传递 页面 查找

    不从新定义只能传过来数字  ,不能穿字符串 完整的ajax 获取参数跳转页面

  2. Spring cloud微服务安全实战 最新完整教程

    课程资料获取链接:点击这里 采用流行的微服务架构开发,应用程序访问安全将会面临更多更复杂的挑战,尤其是开发者最关心的三大问题:认证授权.可用性.可视化.本课程从简单的API安全入手,过渡到复杂的微服务 ...

  3. C#通过文件路径获取文件名

    string fullPath = @"\WebSite1\Default.aspx"; string filename = System.IO.Path.GetFileName( ...

  4. Mysql字符串截取，去掉时间，匹配日期等于今日

    Mysql字符串截取,去掉时间,匹配日期等于今日 方案一 select time from jsb where date(time)=date(now()); 方案二 ));

  5. Process、管理者权限、注册表、xml修改

    //判断是否有管理者权限 WindowsPrincipal principal = new WindowsPrincipal(WindowsIdentity.GetCurrent()); if (!p ...

  6. 用浏览器的油猴子脚本调用IDM下载百度云盘中的资料

    用浏览器的油猴子脚本调用IDM下载百度云盘中的资料(只能支持单个文件下载) 第一步需要现在浏览器中安装油猴子插件Tampermonkey.crx 安装油猴子插件插件主页:https://tamperm ...

  7. JAVA 递归线程池测试 ExecutorService / ForkJoinPool

    测试工具使用递归的方式获取子进程的Msg消息,目前有2种常用的ExecutorService / ForkJoinPool 为了测试哪种效果较好,我们来写个测试Demo,循环5555555次+1(加锁 ...

  8. Spring IoC Container源码分析（二）-bean初始化流程

    准备 Person实例 @Data public class Person { private String name; private int age; } xml bean配置 <?xml ...

  9. Spring Boot源码（三）：去除Tomcat

    Spring boot中使用的是内置的Tomcat,而不像Spring mvc那样依赖外部tomcat运行项目. spring boot中导入了Tomcat的jar包: 点进一个Spring boot ...

  10. 【29】带你了解计算机视觉（Computer vision）

    计算机视觉(Computer vision) 计算机视觉是一个飞速发展的一个领域,这多亏了深度学习. 深度学习与计算机视觉可以帮助汽车,查明周围的行人和汽车,并帮助汽车避开它们. 还使得人脸识别技术变 ...