<!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. python+appium+真机测试

    appium环境搭建 操作系统: Windows 10 被测平台: Android真机 appium服务器: appium Desktop appium客户端: python-client 测试的AP ...

  2. Git 尝试

    1,下载Git 2,安装GIt 3,config : git config --global user.name "mxb" git config --global user.em ...

  3. Docker实战部署JavaWeb项目-基于SpringBoot

    最近在滴滴云上看到服务器很便宜,1核2G,1年只需要68块钱.下面是我基于Docker部署Javaweb服务的过程.目前我见过的最便宜的服务器,阿里云打折的时候都没有这么便宜啊,果断入手.有需要的话可 ...

  4. if、counf、countif、countifs、sumif、sumifs

    评分等级:=IF(C3>=90,"优秀",IF(C3>=80,"良好",IF(C3>=60,"及格","不及格& ...

  5. SP7258 SUBLEX - Lexicographical Substring Search - 后缀自动机,dp

    给定一个字符串,求本质不同排名第k小的子串 Solution 后缀自动机上每条路径对应一个本质不同的子串 按照 TRANS 图的拓扑序,DP 计算出每个点发出多少条路径 (注意区别 TRANS 图的拓 ...

  6. vue 富文本编辑器 项目实战用法

    1.挑个富文本编辑器 首先针对自己项目的类型,确定自己要用啥编辑器. 1.1 wangeditor 如果一般类似博客这种项目不需要花里胡哨的,功能也不要求贼多的,推荐一下wangeditor(点击跳转 ...

  7. javaweb利用javabean将数据库中内容遍历在页面输出

    效果如下图 它所实现的就是把数据库中一个表中所有的数据一条一条以表格的形式输出在网页上, 实现方法如下 首先我们要从数据库读取数据,这里要借助javabean来方便我们传递数据 以上面的为例,我要输出 ...

  8. gitkraken生成ssh keys并连接git

    gitkraken中生成ssh keys 打开gitkraken ,点击左上file,选择preferences 需要选择一个指定目录 将复制的ssh keys粘贴到gitlab 或者 GitHub中 ...

  9. Open Live Writer(olw)博客写作软件

    前言 wlw似乎不再提供下载了,从微软的官网下载安装程序之后,无法联网下载olw组件,所以写博客改用olw. olw是wlw的开源版本,所以wlw上的操作是可以在olw上继续使用的. 关于wlw的知识 ...

  10. numpy包学习笔记

    导入 import numpy as np argsort() numpy中的排序函数 返回的是数组中从小到大的索引值 from numpy import * test=[5,2,3,4,1] pri ...