js修改div里面的data-*的值

最新推荐文章于 2025-02-22 18:30:39 发布

原创最新推荐文章于 2025-02-22 18:30:39 发布 · 9.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js修改data-*的值

js 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在HTML5中使用getAttribute和setAttribute方法操作data-*自定义属性，通过实例展示了如何获取和设置data-属性的值。

使用attributes方法存取 data-* 自定义属性的值

// 使用getAttribute获取 data- 属性
var cjzs= document . getElementById ( 'cjzs' ) ;
var c = cjzs. getAttribute ( 'data-to' ) ;
// 使用setAttribute设置 data- 属性
cjzs. setAttribute ( 'data-to' , '3000' ) ;

html5还是np

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

河下一群鹅

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

HTML中的data-*属性是什么？

qq_38822390的博客

03-05

1236

在HTML中，data-*属性是一种自定义属性，用于在HTML元素中嵌入额外的、用户定义的数据。这些属性以data-前缀开头，后面可以跟任意合法的标识符（如字母、数字和连接符），使得开发者能够将额外的信息存储在HTML元素中，而不会影响页面的表现或功能。

HTML5新增属性data-*和js/jquery之间的交互及注意事项

09-27

如`$('div').attr('data-role')`将返回`data-role`的值，`$('div').attr('data-emp',{'name':'zhangsan','age':23})`则会为元素添加一个`data-emp`属性，其值是一个JSON对象。在设置时，需要注意将JSON对象的键名...

参与评论您还未登录，请先登录后发表或查看评论

HTML5自定义属性 data-

charlie________的博客

05-09

584

HTML5规定可以为元素添加非标准的属性，但是要添加前缀data-,目的是为元素提供与渲染无关的信息，或者提供语义信息。这些信息可以任意添加，随便命名。例子 const div = document.getElementById('myDiv'); const myName = div.dataset.mayName; // 取得值 div.dataset.myName = 'charlie'; // 设置值 ...

【HTML】自定义属性（data）

小秀的博客

01-31

1274

注意：传统方法无兼容性问题，但是不够优雅、方便。HTML5新方法很优雅、方便，但是有兼容性问题。优势：自定义的数据可以让页面拥有更好的交互体验(不需要使用Ajax或去服务端查询数据)。自定义属性 data: 的用法（如何设置,如何获取) ，有何优势？为了解决类似的问题，我们可以使用自定义属性（data-）。这时就不存在属性冲突的问题。此时 title 既是。

如何操作data-*属性？

qq_35436516的博客

02-22

674

在 JavaScript 中操作<div>元素的*data-*

通过js修改html里的值,6种方法改变div的id值（使用JQuery或JS）

weixin_42515340的博客

06-03

5017

div的id是可以动态改变的，我们可以通过JQuery或JS来实现。使用JQuery或JS改变div id使用JQuery改变div id通过使用JQuery的attr()方法，有三种方式可以实现改变div的id值。1)byTagName$('div').attr('id','id_new');2)byId$('#div_id').attr('id','id_new');3)byClass$('....

javascript 使用div层进行数据的添加修改删除

weixin_33995481的博客

06-04

199

为什么80%的码农都做不了架构师？>>> ...

JS JQuery获取data-*属性值方法解析

11-19

### JS JQuery 获取 data-* 属性值方法解析在前端开发中，`data-*`属性是 HTML5 引入的一种新特性，它允许开发者为页面或应用程序中的任何元素添加额外的自定义数据属性。这些属性非常有用，特别是在需要存储与...

html5的自定义data-*属性与jquery的data()方法的使用

09-28

例如，给定一个拥有data-myid属性的div元素，可以通过jQuery的.data()方法轻松地读取该属性值： ```javascript var myid = jQuery("#awesome").data('myid'); console.log(myid); ``` 此外，data-*属性可以包含...

HTML5的自定义属性data-*详细介绍和JS操作实例

12-14

HTML5的自定义属性`data-*`是一种强大的特性，它允许开发者在HTML元素上存储额外的数据，这些数据在页面加载时不会直接展示，但可以通过JavaScript进行读取和修改。这在构建复杂、动态的Web应用时尤其有用，因为它...

JS自定义data-*属性

16个夏天。。。

11-13

9261

这个自定义data属性的用法非常的简单, 就是你可以往HTML标签上添加任意以 "data-"开头的属性, 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的.html5 data-*自定义属性 age //js var content= document.getElementById('content'); alert(content.dataset.age)

js修改easyui中控件的data-option

哈利路亚的收藏夹

03-13

3719

easyui的控件可以通过data-option设置很多配置项，例如必填，很好用。但是有时候新增和修改时的一些必填项不同，这时候需要代码修改。百度了下，没找到，后来google到了。其实也很简单。我们知道easyui的控件可以通过$("#ID").textbox()或者comobox()或者datebox()这样获得控件对象。通过("getValue")("setValue",obj)这样来取值或...

js/jQuery获取data-*属性值

高先生的猫

06-06

1466

面就详细介绍四种方法获取><li id="getId" >"122" >"11">获取id</li>，需要获取的就是>dtat-vice-id的值一：getAttribute()方法 const getId = document.getElementById('getId'); // //getAttribute()取值属性 console.log(getId.getAttribute(">//122 console.log(getId.getA

div标签中:data-bd-bind_9 div标签

weixin_39629876的博客

11-29

405

div标签也就是说，一个网页，可以分割成不同的部分，每一个部分都可以放到一个div标签当中。比如说，一个网站的首页，往往会包含头部、轮播图、页面主体、底部等几大部分，这每一个部分，都需要放到div+css布局div就像是一个容器，可以用它来容纳任何东西，因此div也习惯被称为"盒子"。所以说，咱们的网页是由众多的"盒子"嵌套组成的。我们在Chrome浏览器(Chrome浏览器的开发辅助功...

div标签中:data-bd-bind_html 的结构部分标签（笔记）

weixin_39571749的博客

12-03

373

html 的结构部分标签二、网页常见的结构header 标签 --- 头部分结构nav 标签 --- 导航条部分结构main 标签 --- 主核心部分内容footer 标签 --- 页尾 01.代码示例：............ 02.以上源代码使用 DOM(文件对象模型)表示：bodyheadernavmainfooter 03. header 与 footer 用法 header --- 指整...

如何使用JavaScript将数据附加到div？

asdfgh0077的博客

05-29

1341

我正在使用AJAX将数据附加到div元素，我从JavaScript填充div，如何将新数据附加到div而不会丢失div中的先前数据？

html&css的简单了解

m0_50496669的博客

09-07

1414

html&css html：常用的标签： div、p、ul li、ol li、h1-h6、a、span、b、u、i、input（属性text、number、password、radio、checkbox、submit、reset）、form、select>option、textarea h5(新标签）：header、nav、footer、main、section、video、audio、input（color、range、week、date）标签的分类：单双标签：单标签没有与之对

html 对象元素如何获取div 里的data值原生和jq对象两种获取

hexiaoniao的博客

07-19

4082

这是对象，需要获取到div里的data-id的值转成jq对象就行了 console.log($(t).data("id")) 2.打印一下当前元素：获取当前事件元素： t.currentTarget 获取html内的data值： console.log(t.currentTarget.getAttribute("data-id")); 搞定了 ...

js自定data-*和jquery的data()用法

diakuicu0780的博客

10-03

150

一、data-* ： data-*是HTML5中的新属性。 data-*的定义和用法：　　data-* 属性用于存储页面或应用程序的私有自定义数据。　　data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。　　存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询...

4.在 JS 文件中，通过什么获取 data - * 自定义属性的值。

最新发布

06-25

在 JavaScript 中，可以通过以下几种方式获取 HTML 元素上的 `data-*` 自定义属性的值： ### 1. 使用 `dataset` 属性每个 DOM 元素都有一个 `dataset` 属性，它是一个对象，包含了所有以 `data-` 开头的自定义属性。通过访问 `dataset.propertyName` 可以直接读取对应的值。例如： ```javascript const element = document.getElementById("myElement"); const customValue = element.dataset.customData; // 获取 data-custom-data 的值 console.log(customValue); // 输出: "Hello, World!" ``` 这种方式简洁且推荐用于现代浏览器环境中[^1]。 ### 2. 使用 `getAttribute()` 方法如果需要兼容更旧的浏览器或者动态处理属性名称，可以使用 `getAttribute()` 方法来获取 `data-*` 属性的原始字符串值： ```javascript const element = document.getElementById("myElement"); const customValue = element.getAttribute("data-custom-data"); // 获取 data-custom-data 的值 console.log(customValue); // 输出: "Hello, World!" ``` 这种方法适用于任何类型的属性，并且能够准确获取当前属性的值，不会受到缓存的影响[^3]。 ### 3. 在事件处理中获取 `dataset` 当元素嵌套较深时，为了确保获取到的是绑定事件元素自身的 `data-*` 属性值，而不是子元素的，应该使用 `event.currentTarget.dataset` 而不是 `event.target.dataset`。示例如下： ```html <div> <div data-index="1" onclick="handleClick(event)"> 小强 </div> <div data-index="2" onclick="handleClick(event)"> 小红 </div> </div> ``` ```javascript function handleClick(event) { const dataset = event.currentTarget.dataset; const index = dataset.index; console.log("当前元素 index 值为", index); } ``` 这样即使点击的是 `` 元素，也能正确获取到父级 `<div>` 上的 `data-index` 值[^4]。 ### 4. 注意 jQuery 缓存问题如果同时使用原生 JavaScript 和 jQuery 操作 `data-*` 属性，需要注意 jQuery 的 `.data()` 方法会将首次读取的值缓存，之后即使用原生方法修改了属性值，jQuery 也不会更新缓存。要强制 jQuery 获取最新的值，必须使用 `.removeData()` 清除缓存后再调用 `.data()`： ```javascript $("#myElement").removeData("customData"); const updatedValue = $("#myElement").data("customData"); ``` 这种方式可以解决 jQuery 与原生 JS 混合使用时的数据同步问题[^2]。 ---