js获取自定义data属性

最新推荐文章于 2024-06-20 10:51:44 发布
最新推荐文章于 2024-06-20 10:51:44 发布
阅读量4.7k 收藏 1
点赞数 2
分类专栏： js 
<!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>
山海一哥
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现获取自定义属性data值的方法示例
12-29
本文实例讲述了JS实现获取自定义属性data值的方法。分享给大家供大家参考，具体如下： HTML部分： <div id=tree data-leaves=47 data-plant-height=2.4m></div> js部分： var tree = document.getElementById(tree); //getAttribute()取值属性 console.log(tree.getAttribute(data-leaves)); console.log(tree.getAttribute(data-plant-height)); //setAttri
[js] 获取自定义属性data-
qq_14993591的博客
10-06 1712
Html5规范中规定自定义属性需要添加前缀data-,目的是提供与渲染无关的信息。 读取的时候是通过dataset对象，使用”.”来获取属性，需要去掉data-前缀 <div id="content" data-age="18">12345</div> var content= document.getElementById('content'); alert(content.dataset.age) //jquery $('#content').data('age');//
Javascript：操作标签的自定义属性
最新发布
听海边涛声
06-20 201
Javascript：操作标签的自定义属性
JS获取自定义属性data值
热门推荐
kongjunchao159的博客
08-06 5万+
var tree = document.getElementById("tree"); //getAttribute()取值属性 console.log(tree.getAttribute("data-leaves")); console.log(tree.getAttribute("data-plant-height")); //setAttribute()赋值属性 tree.setA
JavaScript数组方法
6块腹肌的博客
01-13 4448
对js数组方法做个总结和记录，也是方便日后忘记了好再次查询。 在w3c里面，官方给出的数组方法共有30个之多，实际上在开发当中，我们常用的可能也就十多个，下面就把数组的方法写下来： 1、concat()，连接两个或者更多的数组，并返回一个新的数组。 let arr = [2, 3, 1, 9, 7, 5, 8, 22]; let arr2 = ['这是arr2']; console.log...
js获取data-xx自定义属性值，data-xx自定义属性
qq_34648151的博客
05-14 2627
在当前div上定义一个点击事件 当然这里的data-xx名字时可以自己 定义的但是我们一般定义为与元素的值由对应意义的名字 <div onClick={this.handleClick}> <div data-index='1'>小强</div> <div data-index='2'>小红</div> <div data-index='3'>小明</div>
vue.js 获取当前自定义属性值
10-19
本文将详细介绍如何在Vue.js中获取自定义属性值。 首先，需要明确的是，在HTML中，所有以“data-”为前缀的属性都会被自动存储在一个名为`dataset`的特殊对象中，该对象是所有拥有data-*属性的DOM元素的属性集合。...
js设置和获取自定义属性的方法
10-21
另一种获取自定义属性值的方法是直接操作 `attributes` 集合。每个属性都可以被视为一个节点，其属性值可以通过 `nodeValue` 属性来获取： ```javascript var userAttribute = testEle.attributes["data-user"];...
在Vue中获取自定义属性方法:data-id的实例
10-14
总结，Vue中获取自定义属性`data-id`的方法是通过事件监听器和属性绑定，结合`methods`中的函数来实现。同时，我们可以利用`localStorage`进行数据存储，通过解析URL获取参数，以及使用Vue Router进行页面导航和标题...
data.field.属性赋值
剑雪封喉
10-14 3万+
console.log(data.field); data.field.testname="1,2,3,4";(testname是field中的某个属性比如：name，age，sex等) console.log(data.field); 第一次console：{interest: "0", open: "1", more: "1", file: "", testname: "3"} 第二次
关于js里面的变量（基础，适合小白）
亚梓莎的博客
06-03 411
关于js里面的变量，适合小白
js: 获取标签元素data-*属性值的方法
彭世瑜的博客
05-23 5974
标签上有两个属性data-id 和 data-user-name, 需要通过js去获取 <style> #user::before { content: attr(data-id); } #user::after { content: attr(data-user-name); } </style> <div id="user" data-id="666" data-user-name="Tom"></div> 方式
Js获取自定义属性的方法
cghncgfnm的博客
06-05 3657
HTML： <span id='item'
原生js 获取自定义属性
weixin_46352937的博客
06-04 2989
原生js 获取自定义属性的两种方法
JavaScript基础——变量、数据类型
董其心的博客
02-17 376
一、变量 和 常量创建及使用； 1、什么是变量？ 变量是内存中一块存储一个数据的空间，再给这个空间起一个名字； 程序中的所有数据都要保存在变量中，可以反复使用； 2、使用变量：(1). 赋值 ；（2步） 第一步，创建变量，声明创建一个新的变量； 语法：var 变量名; （仅声明，未赋值的变量，默认值为undefined） 变量命名规则：a.不能以数字开头；b.不能使用保留字，既被js
js获取data-*属性值，及赋值
weixin_40030173的博客
05-19 1万+
js获取data-*属性、及设置赋值，此处以a标签为例： <a href="javascript:;" data-id="2020" id="demo0">data0</a> <a href="javascript:;" data-name-id="202005" id="demo1">data1</a> <a href="javascript:;" id="demo2">data2</a> 一、jq获取data属性值的两种方法：
jquery 的使用
weixin_30701575的博客
12-28 74
获取和设置id名为temp_text的div的html里的内容： var text=$("div[id=temp_text]").html();$("div[id=temp_bszn_text]").html(html); jquery checkbox 将一组名为modifySystem的checkbox 中value=1的设置为选中 $("input[name=...
JQuery 已经获取某个对象，怎么获取它的值
qq_44927883的博客
05-26 1019
错误： $("td[data-field='fieldHtmlType'] dd[class='layui-this']")[0] 正确： $("td[data-field='fieldHtmlType'] dd[class='layui-this']").eq(0)
原生js获取自定义属性e.data
09-09
原生JS获取自定义属性`e.data`的方法如下： 1. 首先，我们需要获取到事件对象`e`，通常是在监听事件的回调函数中获取到。 2. 获取`e`对象的自定义属性`data`，可以通过`e`对象的`getAttribute()`方法来获取。例如： ```javascript var data = e.getAttribute('data'); ``` 如果`e`是一个DOM元素的事件对象，可以改为： ```javascript var data = e.target.getAttribute('data'); ``` 3. 其他方法可以使用`dataset`属性来获取自定义属性值。例如： ```javascript var data = e.dataset.data; ``` 这种方法适用于HTML5中的`data-*`属性。 4. 如果自定义属性`data`是在HTML标签的`data-*`属性中定义的，则可以直接通过`e`对象的`dataset`属性来获取。例如，如果自定义属性是`data-data`，则可以使用`e.dataset.data`来获取。 总之，原生JS获取自定义属性`e.data`的方法有多种，可以根据具体情况选择合适的方法来获取。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值