<!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. Scheduled和HttpClient的连环坑

    首页 > JAVA > @Scheduled和HttpClient的连环坑 @Scheduled和HttpClient的连环坑 2018-03-22 曾经踩过一个大坑: 由于业务特殊性,会 ...

  2. c#中用office组件读取excel时提示异常来自 HRESULT:0x80010105 (RPC_E_SERVERFAULT)

    在excel2007,找到“excel选项”,点开后点击“加载项”,最下面有个管理加载项的下拉菜单,选“COM加载项”,点“转到”,这时会弹出一个框,把里面pdf软件的加载项前面的勾去掉,点确定就ok ...

  3. 剑指offer-面试题57_1-和为s的两个数字-双指针

    /* 题目: 输入一个递增数组和一个s,求和等于s的两个数组中的数字. */ /* 思路: 双指针问题. */ #include<iostream> #include<cstring ...

  4. cf1184E1

    题意简述:给出n个点m条边的无向图,你可以修改第一条边的权值,使得他可能会处于一棵最小生成树中,问你第一条的权值最大(不超过1e9)可以改为多少 题解:不去使用第一条边去跑最小生成树,然后在跑的过程中 ...

  5. React函数式组件使用Ref

    目录: 简介 useRef forwardRef useImperativeHandle 回调Ref 简介 大家都知道React中的ref属性可以帮助我们获取子组件的实例或者Dom对象,进而对子组件进 ...

  6. 44.Python实现简易的图书管理系统

    首先展示一下图书管理系统的首页: 这是图书管理系统的发布图书页面: 最后是图书管理系统的图书详情页已经图书进行删除的管理页. 该图书管理系统为练习阶段所做,能够实现图书详情的查询.图书的添加.图书的删 ...

  7. Java数列循环右移

    描述 有n个整数组成一个数组(数列).现使数列中各数顺序依次向右移动k个位置,移出的数再从开头移入.输出移动后的数列元素,元素之间逗号隔开. 题目没有告诉你n的范围,要求不要提前定义数组的大小. 另外 ...

  8. 《NVM-Express-1_4-2019.06.10-Ratified》学习笔记（6.5-加-8.2-加-8.3）End-to-end_Data_Protection

    6.5 End-to-end Protection Information 端到端保护信息 包含数据转存的命令可以使用端到端数据保护.在这些命令内部[位于Command Dword 12 的 [29: ...

  9. Docker最全教程——从理论到实战（二十三）

    如何节约云端成本? 上云在大部分情况下就是为了降低成本,在这方面,主流的容器服务基本上都能够有效地降低成本——不仅能够高效自动化的管理和控制容器,而且不需支付Kubernetes 主节点的费用.不过, ...

  10. idea基于spring boot的依赖分开打包

    idea版本为2018.3.3 1.在菜单栏点击如图所示图标 Project Structure: 2.选择左侧菜单Artificial,然后在右侧点击 + 号按钮,在弹出的菜单中选择JAR -> ...