<!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. java 测试 (junit+ junit 断言 + postman)

    实际开发中,除了开发,我想测试也是必不可少的一环吧.从简单的@Test .main 方法测试 到 页面测试 ,断言,postman. bug是无处不在,随时发生的事,高效率的调试.检测可以节省大量的开 ...

  2. Bootstrap 手机屏幕自适应的响应式布局开关

    head中添加 <meta name="viewport" content="width=device-width, initial-scale=1, shrink ...

  3. Asp.net core 3.1+EF Core2.2.6+Oracle.EntityFrameworkCore2.1.19连接Oracle数据库

    Asp.net Core 3.1+EF Core2.2.6+Oracle.EntityFrameworkCore2.1.19连接Oracle数据库 1.前言 本次主要采用Asp.net core3.1 ...

  4. qt creator源码全方面分析(2-2)

    目录 Common Extension Tasks Common Extension Tasks 本节总结了可用于将UI组件添加到Qt Creator的API函数. 任务 详细 API 添加菜单或菜单 ...

  5. navicate 连接mysql8.0，个人踩坑问题汇总

    navicate 连接mysql8.0,个人踩坑问题汇总本文目录:1:安装mysql8.0新增全新验证方式,安装如果不修改mysql连接不上2:mysql启动命令问题3:navicate 运程连接My ...

  6. Vue中vue-i18n结合element-ui实现国际化

    (一)添加依赖模块 在package.json文件中添加vant模块的依赖,如: // package.json { "dependencies": { "element ...

  7. aov.h-1.1

    //AOV网与拓扑排序类 #ifndef _AOV_H_ #define _AOV_H_ #include<iostream> #include<cstdio> #includ ...

  8. Java 【instanceof使用】

    一.instanceof使用 public class demo{ public static void main(String[] args){ String name = “hello”; boo ...

  9. MySQL8服务无法正常启动的解决方法(1053错误)

    个人博客 地址:https://www.wenhaofan.com/article/20190530120545 错误描述 在MySQL安装的最后一步启动失败,如下图所示 在服务和应用程序->服 ...

  10. ng-简介

    Angular 是什么 Angular(读音['æŋgjʊlə])是一套用于构建用户界面的 JavaScript 框架.由 Google 开发和维护,主要被用来开发单页面应用程序. 类似于 Vue.j ...