首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何让一个按钮点击获取自己div内的数据属性?

要让一个按钮点击获取自己div内的数据属性,可以通过以下步骤实现:

  1. 首先,给按钮添加一个点击事件的监听器。
  2. 在点击事件的处理函数中,使用JavaScript获取到该按钮所在的div元素。
  3. 通过div元素的属性或方法,获取到需要的数据属性。

下面是一个示例代码:

HTML部分:

代码语言:txt
复制
<div id="myDiv" data-info="这是div的数据属性">
  <button id="myButton">点击获取数据属性</button>
</div>

JavaScript部分:

代码语言:txt
复制
// 获取按钮和div元素
var button = document.getElementById("myButton");
var div = document.getElementById("myDiv");

// 给按钮添加点击事件监听器
button.addEventListener("click", function() {
  // 获取div的数据属性
  var dataInfo = div.getAttribute("data-info");
  
  // 在控制台输出数据属性
  console.log(dataInfo);
});

在上述示例中,我们首先通过getElementById方法获取到按钮和div元素。然后,使用addEventListener方法给按钮添加了一个点击事件的监听器。在点击事件的处理函数中,通过getAttribute方法获取到div的数据属性,并将其输出到控制台。

这样,当点击按钮时,就可以获取到div内的数据属性。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

一文你彻底搞懂 vuex,满满干货

简单地讲:可以把多个组件都需要变量全部存储到一个对象里面,然后这个对象放在顶层 vue 实例中,其他组件可以使用。这样多个组件就可以共享这个对象中所有属性。...有些同学想着,这么简单我们自己在vue顶层定义一个对象不就可以实现共享了?我们发现虽然数据可以获取到,但是如果在某个组件数据改变了,那我们如何修改数据数据在其他组件保持最新呢?...,count 增加 5 上个实例传递一个参数,如果我们需要传递多个参数时,该如何实现呢?.../ 组件引用 {{ $store.state.a.aName }} 3》调用模块 mutations 中方法,如何调用呢?...,可以做到响应式,而点击“增加地址”按钮时,页面没有任何反应,但是在开发者模式中可以看到数据有变化。

86320

真正掌握vuex使用方法(三)

接下来要做事就是按钮起到应有的责任:点击对应按钮数字加1, 总票数也要加1。...咱们知道vue视图都是由数据驱动,也就是说状态(state)里面的数据是动态变化,而要改变状态数据唯一方法就是通过mutation!...也就是说mutation可以存放一些改变状态逻辑方法!这也是Vuex设计一个特点,处理数据逻辑和视图进行分离!...咱们现在在原来基础之上再给加一个按钮点击按钮票数加2,修改App.vue: 总票数:{{nodeVoteCount+vueVoteCount...那好奇小伙伴一定在想,如果我写一些异步操作,会如何呢?哈哈,也不会发生什么人惊讶事情!只不过官方推荐不要在mutation方法写异步操作! 未完,待续!

65910
  • JS简单页面交互实战 - 点击按钮实现求和功能

    上一期堡堡给大家讲解了简单页面交互效果 - 点击块,块动起来,让我们更清晰了解JS逻辑和DOM结合。如果想具体了解点击块,块动起来,可以回复“交互”到“HTML5学堂”公众号。...,那我们如何去实现一个页面交互效果?...3 第二步:仔细查看功能,并根据基本功能构建结构样式 标签选择分析: 在功能描述中“将两个文本框中输入数字进行加和运算”,可以用户提交数据标签也只能是表单元素,在这边明显是input元素; 为了优化...属性获取表单内容是属于字符串类型; 对两个文本框中内容进行加和运算 现在已经知道通过value属性获取内容是字符串类型,然后再对内容进行加法操作,结果会如何?...我们来想一个问题,假如页面中出现了多个点击按钮实现求和功能,你是把代码复制黏贴一遍还是进行代码封装?

    17.6K80

    前端成神之路-WebAPIs02

    全选和取消全选做法: 下面所有复选框checked属性(选中状态) 跟随 全选按钮即可 // 获取元素 var j_cbAll = document.getElementById...') get得到获取 attribute 属性意思 我们程序员自己添加属性我们称为自定义属性 index console.log(div.getAttribute('id'));...H5自定义属性 自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。 自定义属性获取是通过getAttribute(‘属性’) 获取。...(div.getAttribute('data-list-name')); // h5新增获取自定义属性方法 它只能获取data-开头 // dataset 是一个集合里面存放了所有以...实际开发中,firstChild 和 lastChild 包含其他节点,操作不方便,而 firstElementChild 和 lastElementChild 又有兼容性问题,那么我们如何获取一个子元素节点或最后一个子元素节点呢

    73810

    Web前端学习 第3章 JavaScript基础教程15 DOM操作

    一、节点分类 元素节点 属性节点 文本节点 上一节课我们讲解了获取元素节点,操作属性节点。本节课我们讲解添加和删除元素节点和编辑文本节点。...二、文本节点 在html中我们有一个h1标签和一个按钮,h1标签已经有了一段文本。...12 } 13 在DOM中还有另一个属性可以更方便地获取和设置文本节点,这个属性是innerHTML,我们写一个简单例子来测试innerHTML属性 示例代码如下: 1...5 鸭梨 6 我们要是先一个功能,当点击按钮时候,在列表中添加一个li元素 代码如下 1 var btn = document.querySelector("button...元素了,但是文本节点是固定“鸭梨”,我们还可以进一步通过一个文本框,用户自己填写要插入内容 1 2 var btn = document.querySelector

    64810

    「Web编程API」- 02

    获取所有按钮元素 var btns = document.getElementsByTagName('button'); // btns得到是伪数组 里面的每一个元素 btns[i]...全选和取消全选做法:下面所有复选框checked属性(选中状态) 跟随 全选按钮即可 // 获取元素 var j_cbAll = document.getElementById...attribute 属性意思 我们程序员自己添加属性我们称为自定义属性 index console.log(div.getAttribute('id')); console.log...H5自定义属性 自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。 自定义属性获取是通过getAttribute(‘属性’) 获取。...实际开发中,firstChild 和 lastChild 包含其他节点,操作不方便,而 firstElementChild 和 lastElementChild 又有兼容性问题,那么我们如何获取一个子元素节点或最后一个子元素节点呢

    48030

    分享5个关于 Vue 小知识,希望对你有所帮助(五)

    大家好,今天我继续分享5个关于 Vue 小知识,希望对你有所帮助。 1、如何使 Map 和 Set 类型数据具有响应性?...我们从 evt.which 或 evt.keyCode 属性获取键盘按键字符代码。然后检查该字符编码是否在数字键盘范围(48到57之间)或者是否是小数点(46字符编码)。...我们想要触发第二个按钮点击事件。 为了做到这一点,我们添加了 myClickEvent 方法,该方法获取分配给 myBtn 引用按钮。 然后我们对其进行调用。...在第二个按钮中,我们将 @click 指令设置为 myClickEvent2 以记录点击。 现在当我们点击一个按钮时,我们会看到 'clicked' 已输出。...API获取数据方法。

    16110

    前端爬坑日记之vue内嵌iframe并跨域通信

    /pboji...点击预览 下面将3天爬坑最终以问答方式总结如下: 1、Vue组件中如何引入iframe?...2、vue如何获取iframe对象以及iframewindow对象? 3、vue如何向iframe内传送信息? 4、iframe如何向外部vue发送信息?...src属性绑定data中src,第一步引入就完成了 2、vue如何获取iframe对象以及iframewindow对象?...postMessage向外部发送一个消息,外部监听message 为了postMessage像TCP,为了体验像同步和实现多通信互不干扰,特别制定message结构如下 { cmd: '命令...现在通过点击“向iframe发送信息”这个按钮,从外部vue中已经向iframe中发送了一条信息 { cmd: 'getFormJson', params: {} } 那么iframe内部如何处理这个信息呢

    7.5K40

    你以为万能爬虫方法,其实一行代码就能识别!

    于是,有些同学想到了另一个方法,就是自己一个Chrome插件,在网站打开时候,注入到页面中,然后通过这个注入JavaScript代码来操作页面,获取数据。...这个方法理论上说是万能,因为注入JavaScript能够获取当前Dom树,任何接口签名都无法拦截到自己注入JavaScript代码,如下图所示: 而Chrome插件访问自己服务器后端是没有跨域问题...,完全可以插件获取数据以后,发送给自己服务器,这样就可以把数据收入囊中了。...你还可以通过JavaScript自动点击按钮,实现自动翻页。所以你只需要把网页打开,启动插件,然后他就能自动刷新,自动获取数据了。 这个方法看起来非常万能,而且无法被防御…… 事实真的是这样吗?...Demo页面长下面这样: 当我手动点击点击按钮时候,会弹出一个框: 现在,我使用JavaScript来选择这个按钮,然后点击它: 为什么网站知道我在用JavaScript点击按钮呢?

    1.6K40

    接口测试平台代码实现25:项目列表页新增功能

    这个弹层默认是隐藏一个div,当点击新增按钮后,修改该弹层隐藏属性为显示。当点击确定/取消按钮后,再把弹层隐藏属性变为隐藏。 点确定时候,会发送给后台一个异步请求,带着用户写新项目名字。...后端新建一个项目。等返回成功后,项目列表页面刷新,用户即可看到新增那个项目了。 上述设计中,我们最好先着手开发这个div弹层,不要一开始把它设置成隐藏。...然后我们要给它添加一个输入框和俩个按钮: 看看效果 现在我们要让取消按钮生效: 取消按钮点击后 修改这个div隐藏属性为隐藏,所以要给这个div加个id以便定位:id="add_project_div...接下来就是我们顺便给这个div 写成默认隐藏,需要用户点击 新增项目按钮才能显示~ 所以给它加上一个display属性: 然后给新增项目按钮 增加一个onclick属性: 让我们刷新页面试试效果...: 表类名.objects.create() 括号写各个字段值,这里我们项目名字已经获取到,创建者名字就从request参数中user.username方法获取到(只要有登陆态都肯定有名字)

    98730

    接口测试平台代码实现1:环境和所需技术

    django你可以理解为就是一个pip能下载第三方框架,然后你在它这个框架去填东西,不出意外的话,一小时以内,你就能搭建一个自己平台了,虽然只是第一个页面,没啥美感可言。...比如你要设计用户点击这个按钮就提示xxx,这种动作 就需要靠js了。jquery是在js基础上进行又一次封装,使用起来简单一些。...比如button按钮,你想点击操作弹出提示xxx, 就要给这个按钮一个属性:onclick= ... 这个属性就代表有人点击之后会运行什么js函数,然后指向一个js函数。...button按钮举例,给它加个属性,style="background-color=red" ,就是按钮背景颜色变成红色。...我们可以不用在自己手写各种sql了,和链接断开上传获取这一大堆语句了。也不用担心数据库连接失败,忘记断开,线程池等等一大堆事情。

    53010

    微信小程序【常用组件及自定义组件】

    微信小程序入门文章,其实暂时就更新到这里了,还有一个生命周期内容,感觉当初整理不是很好就不更新了,学完了 WXML、WXSS、一些常用组件,还有事件绑定,其实一个较为不错页面已经能自己搭建出来了...,如果你还想继续往后面研究,我给一下方向就是,可以开始看 与后台交互内容了,发送异步请求,对数据进行回显等,回显内容时,你就又可以开始考虑用什么别的组件,可以页面的数据加载或者观看更加顺滑,美观,当然有很多小伙伴都是后端...,其实不考虑这个也是可以,就单纯的当做一个布局 div 来用 属性 类型 默认值 必填 说明 最低版本 hover-class string none 否 指定按下去样式类。...注:父组件是页面,子组件是自定义组件 ⽗组件通过属性⽅式给⼦组件传递参数 组件通过事件⽅式向⽗组件传递参数 通过一个例子来演示 在上面结构上自己一个自定义组件,一个导航条效果 自定义组件页面代码...js文件,在 properties 中内容,就是接收到父(页面)数据,也就是一个关于导航数组,其中包括首页测试关于等等导航文字内容 headerTabs位置:要接受名称,自己定 type:要接收数据类型

    1.8K20

    JavaScript——DOM基础

    Element.getElementsByTagName('标签名'); 注意:父元素必须是单个对象(必须指明是哪一个元素),获取时候不包括父元素自己。...简单理解:触发---相应机制 网页中每个元素都可以产生某些可以触发JavaScript事件,例如,我们可以在用户点击按钮时产生一个事件,然后去执行某些操作。...事件源:事件被触发对象,谁被点击---按钮 事件类型:如何触发,什么事件,比如鼠标点击(onclick)还是鼠标经过或者是键盘按下。 事件处理程序:通过一个函数赋值方式完成。...H5自定义属性 自定义属性目的:是为了保存并使用数据,有些数据可以保存到页面中而不用保存到数据库中。 自定义属性获取是通过 getAttribute('属性')获取。...console.log(div.previousElementSibling); 在后两种方式中可能会面临兼容性问题,我们可以自己封装一个兼容性函数来解决

    6.6K20

    【Python爬虫实战】深入解锁 DrissionPage:ChromiumPage 自动化网页操作指南

    page.click('button#submit') # 通过选择器查找并点击按钮 输入文本:使用 input() 方法将文本输入到指定输入框中。...text = page.ele('div.classname').text print(text) 获取属性值:使用 attr() 获取元素指定属性值。...、输入文本、点击按钮获取文本内容: from drission import Drission # 创建 Drission 和 ChromiumPage 对象 drission = Drission...DrissionPage ChromiumPage 提供了简洁元素定位和操作方法,用户可以通过 CSS 选择器或 XPath 定位页面元素,并对其进行点击、输入、获取文本等操作。...('#submit_button') # 操作 iframe 按钮 (四)切换回主页面 在完成 iframe 操作后,可以使用 to_parent() 方法切换回主页面。

    7210

    🤔听说这个动效可以玩一天?

    css透视和一定幅度Y轴旋转,构造成被点击下陷感觉,仔细观察发现不同按钮点击后两侧容器旋转偏移量还不尽相同,所以我们还需要动态修改他原点; 「按钮」则是包含相关内容一个盒子,有选中和未选中两种不同状态...勉勉强强吧 按钮 按钮呢因为他本身没有轮廓样式,所以我是直接把它理解为「均分了容器两个透明盒子」,然后内部元素不确定,用「弹性布局」按钮子元素都居中就行。...这样点击后,滑块就会自己滑来滑去啦! 3. 按钮动效 那,滑块都自己动起来了,你按钮不得自己动? 自己动? 动? 懂了!直接在点击里修改每个按钮类名不就行了?...哼哼,一个小细节。 所以在下处理方式是在点击后给添加类名代码添加一个定时器,有无更好方法麻烦告知在下。 文字缩放和在下小细节,能看出来吗? 4....当点击按钮1时,将原点设置为按钮2半侧某个点,反之亦然 「嗦干酒干」,这里在下用到还是css变量方法 #btnWrapper { /* ...其他属性 */ /* transform-origin

    90110

    理解 React Hooks Capture Value 特性

    在下列代码中,当你点击按钮 3s 后,alert 显示数值却是 3s 前 count 变量 —— 即无法获取最新值,获取值是过去某个时刻: import React, { useState,...显示 按钮,在 3s 后(模拟耗时任务)会出现弹层 在这 3s 期间快速点击 增加 count 按钮 3s 后看到弹层计数仍旧为 0. ?...显示 count 按钮 增加一个 减少 count 按钮 使用 useEffect 代替 useCallback,每次更改 count 都会弹窗 ... useEffect(()=>{ setTimeout...3s 后 alert 显示 count 变量就是最新 value ❝ref 类型变量通常是用来存储 DOM 元素引用,但在 react hooks 中,它可以存放任何可变数据,就好比类实例属性一样...: 如何获取变更前 props 和 state ?

    1.3K10

    C1能力认证训练题解析 _ 第四部分 _ Web进阶「建议收藏」

    常用节点属性获取方式: 名称 描述 getAttribute() 返回元素一个指定属性值 直接使用属性名称获取 适用于部分属性(如:title,value,href) (1)获取id名为container...________('div#container') 答案:querySelector “div#container”属于CSS选择器字符串,且id名不可重复,选择只能是一个元素,所以需要获取指定选择器或选择器组匹配一个节点...(4)获取div所有p元素和span元素,请补全横线处代码。...('div').________ console.log(word) 答案:innerText sky分别对应div三个span元素中文本,所以这里只需要获取到元素文本内容...当事件属性 returnValue 被赋值为非空字符串时,会弹出一个对话框,用户确认是否离开页面(示例如下)。否则,事件被静默处理。

    2K20
    领券