<!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. C语言再学习part3—算法

    君子远庖厨,万物皆备于我.—孟子 这篇文章主要总结程序的主要要素,以及程序的构成是什么样子的.最后说说我学到的一种奇特的表示算法的方式—伪代码. 让我们开始吧! 一个程序应该包括以下两个主要要素: 1 ...

  2. MyBatis中foreach循环的用法

    一.在了解foreach之前,先了解一下mybatis传入参数及parameterType 1.我们在Dao层向对应的mapper.xml文件传递参数时,可以传递的参数有: ①.基本数据类型(如int ...

  3. 文件下载（download） 前后台备注自用

    1.后台 1.1 ResponseBean 返回封装的格式 @Data @Accessors(chain = true) public class ResponseBean { private Str ...

  4. 安装MYSQL到Ubuntu（APT）

    运行环境 系统版本:Ubuntu 16.04.6 LTS 软件版本:MYSQL-5.7 硬件要求:无 安装过程 1.安装APT-MYSQL存储库 APT-MYSQL存储库由MYSQL官网提供.选择安装 ...

  5. Bazinga HDU - 5510【技巧暴力+字符串】

    题目:https://vjudge.net/problem/HDU-5510 $2015ACM/ICPC$ 亚洲区沈阳站 题目大意: 输入$t$(表示样例个数) 如何每个样例一个 $n$,表示字符串的 ...

  6. Wannafly Winter Camp 2020 Day 6G 单调栈 - 贪心

    对于排列 \(p\),它的单调栈 \(f\) 定义为,\(f_i\) 是以 \(p_i\) 结尾的最长上升子序列的长度 先给定 \(f\) 中一些位置的值,求字典序最小的 \(p\) 使得它满足这些值 ...

  7. Java8新特性一览表

    总览 forEach() method in Iterable interface(Iterable接口中的forEach()方法) default and static methods in Int ...

  8. python 队列、栈

    队列 常规队列 双端队列 优先级队列 栈

  9. STL函数 lower_bound 和 upper_bound 在算法竞赛中的用法

    以前比较排斥这两个函数,遇到需要二分的情景都是手写 \(while(left<=right)\). 这次决定洗心革面记录一下这两个函数的在算法竞赛中的用法,毕竟一般不会导致TLE. 其实百度百科 ...

  10. 安装CPULimit到Linux（源码）

    运行环境 适用系统:所有Linux系统 当前版本:无 硬件要求:无 安装过程 1.安装依赖 root@localhost:~# apt-get -y install git 2.从GitHUB中克隆源 ...