<!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. LeetCode 面试题22. 链表中倒数第k个节点

    题目链接:https://leetcode-cn.com/problems/lian-biao-zhong-dao-shu-di-kge-jie-dian-lcof/ 输入一个链表,输出该链表中倒数第 ...

  2. Java 【Math】

    一.Math类的使用方法 public class demo{ public static void main(String[] args){ double pi = Math.PI; //Math函 ...

  3. 关于牛客网C语言结构体位域(bit-fields)的一道题

    题目链接地址: https://www.nowcoder.com/questionTerminal/f4e20747a2dd4649bac0c028daa234f4 来源:牛客网 低地址字节 Byte ...

  4. Python编辑器——Pycharm以及Sublime Text 3的安装教程

    近来工作繁忙,顾不上学习,但还是有些小兄弟问我有没有编写Python代码的工具以及安装方法,跟我吐槽说他安装后总是有问题.那么今天就来说一说Pycharm的安装,顺带说一下Sublime Text 3 ...

  5. Prometheus的查询语法是PromQL基本语法

    PromQL(Prometheus Query Language)是 Prometheus 自己开发的表达式语言,语言表现力很丰富,内置函数也很多.使用它可以对时序数据进行筛选和聚合. 1- Prom ...

  6. ssrf漏洞利用(内网探测、打redis)

    摘要:存在ssrf漏洞的站点主要利用四个协议,分别是http.file.gopher.dict协议. file协议拿来进行本地文件的读取,http协议拿来进行内网的ip扫描.端口探测,如果探测到637 ...

  7. 安装APACHE到CentOS（YUM）

    运行环境 系统版本:CentOS Linux release 7.3.1611 (Core) 软件版本:httpd-2.4.6 硬件要求:无 安装过程 1.安装YUM-EPEL源 HTTP-Tools ...

  8. Linux网络课程学习第六天

    本节课程主要内容:针对第四章节进行了收尾,以及对第五章的用户身份与文件权限进行了详细讲解. 学习心得:干货很多,收获满满.

  9. Qt Gui 第十章

    一.QListWidget.QTableWidget和QTreeWidget QTableWidget的item默认是可以编辑,其他两个的item默认是不可编辑.如果要将QTableWidget设置成 ...

  10. 1级搭建类109-Oracle 12cR2 SI FS（Windows Server 2019）公开

    Oracle 12cR2 单实例文件系统在Windows Server 2019上的安装 在线查看