<!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. STL中的Set和Map——入门新手篇

    STL中的Set和Map 先来看一段网络上的文字描述: 上图是一段关于STL中Set集合的描述,同样的,也近似适合Map的描述.上述文字中,描述了最为重要的特征: Set和Map,底层调用了红黑树的结 ...

  2. PTA 汉诺塔的非递归实现（C 语言）

    借助堆栈以非递归(循环)方式求解汉诺塔的问题(n, a, b, c), 即将N个盘子从起始柱(标记为“a”)通过借助柱(标记为“b”)移动到目标柱(标记为“c”), 并保证每个移动符合汉诺塔问题的要求 ...

  3. mongoose中Documents的save方法

    调用save方法保存数据有的时候是插入有时候是更新, 数据库 我知道save在保存的时候会检测数据的更改,只是更新更改的部分.所以我重复save时,只是createAt更改那么我最后只应该保存了一条数 ...

  4. python如何安装Jupyter notebook

    一,安装Jupyter notebook 环境:win10,python3.7 两种安装方式,这里只讲pip安装 pip install jupyter notebook 二,启动Jupyter no ...

  5. JMeter接口测试-JMeter+ant实现接口自动化测试

    前言 小伙伴们,用python做接口自动化是不是写代码比较繁琐,而且没有python代码基础的小伙伴根本无从下手对吧!今天我们来学习一下如何使用JMeter工具实现接口自动化测试. 1.安装JDK,配 ...

  6. 到底什么是.NET?

    ​.NET 概念比较庞大,本文只讨论基础知识,只用简单语言描述. 我们是NET程序员,但是我们有没有思考过到底什么是.NET ? 官方定义 .NET是微软推出来的一个致力于敏捷开发的软件框架. 大概2 ...

  7. webpack代理解决跨域

    开了一个9000端口,又开了一个8881端口,在9000端口访问页面,数据接口是8881,这样就产生了跨域,如何解决? webpack中做如下配置: proxy: { '/api/*': { targ ...

  8. 写Blog的准备工作Window Live Writer

    以下是博客园的帮助博客: Windows Live Writer配置步骤 感觉里面的几篇推荐文档都可以看一下,至于代码高亮插件,个人选择的还是SyntaxHighlighter. 一. 关于写blog ...

  9. u盘变成Read-only file system

    先查看U盘的设备号,然后修改后重新挂载 fdisk -l sudo dosfsck -v -a /dev/sdb4  

  10. Mysql注入汇总！！！！！！！！！

    师傅tpl!!!!! https://xz.aliyun.com/t/7169[对MYSQL注入相关内容及部分Trick的归类小结] https://www.jianshu.com/p/f261125 ...