<!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. 1-2.Kubectl命令行工具

    1.kubectl用法 $~: kubectl [command] [TYPE] [NAME] [flags] [command] 子命令.用于操作Kubernetes集群资源对象. 可取值:[cre ...

  2. 洛谷P4525 【模板】自适应辛普森法1与2

    洛谷P4525 [模板]自适应辛普森法1 与P4526[模板]自适应辛普森法2 P4525洛谷传送门 P4525题目描述 计算积分 结果保留至小数点后6位. 数据保证计算过程中分母不为0且积分能够收敛 ...

  3. 康托展开+反向bfs

    康托展开+反向bfs hdu 1043 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1043 #include <iostream> # ...

  4. H5_0027：Layer使用

    1,提示     document.getElementById("cloWd").onclick = function(){       layer.confirm('您确定要关 ...

  5. 输出redis cluster 主从的对应关系，如果同一个主从关系的master和slave在同一个node节点上，在输出的对应关系末尾输出提示

    需求:输出redis cluster 主从的对应关系,如果同一个主从关系的master和slave在同一个node节点上,在输出的对应关系末尾输出提示. 为什么会有这样的需求呢?在重新搭建redis ...

  6. node-sass pip 安装报错，提示缺少python2

    解决办法参考https://segmentfault.com/a/1190000010984731?utm_source=tag-newest npm uninstall node-sass npm ...

  7. STM32CubeMX自建MDK工程的基本步骤

    根据需要调节各总线频率 最下方选项,√去掉,不用实时更新库,选择自己库所在路径就好. 点击左侧, 选择"Code Generator", 选择.c 和 .h文件不分开 最后,点击& ...

  8. json转dataset的另外一种解析方式自动生成guid强关联

    /// <summary> /// 将json字符串自动转成dataset,并且自动补全主子关联关系, /// Guid,FKGuid /// Author:lijia /// date: ...

  9. 精心收集java基础106条

    Java基础 1.一个".java"源文件中是否可以包括多个类(不是内部类)?有什么限制? 一个Java源文件中可以定义多个类,但最多只能定义一个public的类,并且public ...

  10. （C语言）学生成绩排序-期末考倒数第二题结构体数组排序

    假设学生的基本信息包括学号.姓名.三门课程成绩以及个人平均成绩,定义一个能够表示学生信息的结构类型.输入n(n<50)个学生的成绩信息,按照学生的个人平均分从高到低输出他们的信息.如果平均分相同 ...