zoukankan      html  css  js  c++  java
  • 获取data-*属性值

    下面就详细介绍四种方法获取data-*属性的值

    <li id="getId" data-id="122" data-vice-id="11">获取id</li>

    需要获取的就是data-id 和 dtat-vice-id的值

    一:getAttribute()方法

    const getId = document.getElementById('getId');
    // //getAttribute()取值属性
    console.log(getId.getAttribute("data-id"));//122
    console.log(getId.getAttribute("data-vice-id"));//11
    // //setAttribute()赋值属性
    getId.setAttribute("data-id","48");
    console.log(getId.getAttribute("data-id"));//48

    二:dataset()方法

    //data-前缀属性可以在JS中通过dataset取值,更加方便
    console.log(getId.dataset.id);//112
    //data-vice-id连接取值使用驼峰命名法取值 
    console.log(getId.dataset.viceId);//11
    
    //赋值
    getId.dataset.id = "113";//113
    getId.dataset.viceId--;//10
    
    //新增data属性
    getId.dataset.id2 = "100";//100
    
    //删除,设置成null,或者delete
    getId.dataset.id2 = null;//null
    delete getId.dataset.id2;//undefind

    三:jquery data()方法

    var id = $("#getId").data("id"); //122
    var viceId = $("#getId").data("vice-id"); //11
    //赋值
    $("#getId").data("id","100");//100

    四:jquery attr()方法

    var id = $("#getId").attr("data-id"); //122
    var viceId = $("#getId").attr("data-vice-id"); //11
    //赋值
    $("#getId").attr("data-id","100");//100

    这样以后做详情页就可以愉快的玩耍了

  • 相关阅读:
    24-反转链表
    23-链表中环的入口节点
    22-链表中倒数第k个节点
    21-调整数组顺序使奇数位于偶数前面
    18-删除链表的节点
    17-打印从1到最大的n位数
    16-数值的整数次方
    15-二进制中1的个数
    14-剪绳子
    13-机器人的运动范围
  • 原文地址:https://www.cnblogs.com/niyl/p/10223525.html
Copyright © 2011-2022 走看看