代码之家 › 专栏 › 技术社区 › Alberto

使用Javascript从clicked元素获取属性

onclick events html javascript

Alberto · 技术社区 · 5 年前

目标 :获取 data-element 从被点击的按钮。

我的当前代码:

Array.from(document.getElementsByClassName('my_buttons_class')).forEach((button) => {
     button.addEventListener('click', (e)=>{
           e.preventDefault();
           /*
                Here i want to get the 'data-element' from the clicked button
                something like 
                e.target.attr('data-element');
           */
     })
});

button元素如下:

<button class="my_buttons_class" data-element="some json">My button text</button>

当前问题 :侦听器工作正常,但 e.target 只是那个元素的HTML文本,所以我不能使用 .attr() 在上面

也已经试过了 e.target['data-element'] 但它还没有定义

3 回复 | 直到 5 年前

Mamun 5 年前

.attr() 是jQuery方法,在普通JavaScript中必须使用 getAttribute() 要访问属性:

e.target.getAttribute('data-element');

Array.from(document.getElementsByClassName('my_buttons_class')).forEach((button) => {
  button.addEventListener('click', (e)=>{
    e.preventDefault();
    console.log(e.target.getAttribute('data-element'));        
  });
});

<button class="my_buttons_class" data-element="some json">My button text</button>

CertainPerformance 5 年前

这个 button 变量是指正在迭代的按钮,因此要访问 data-element 该元素的属性,使用:

button.dataset.element

或者,用 getAttribute :

button.getAttribute('data-element')

元素不会自动将其属性指定为其Javascript引用的属性-这只适用于某些属性类型,如 id , class ,和 name ,这就是为什么 e.target['data-element'] 不起作用。

Blue 5 年前

尝试使用 getAttribute :

Array.from(document.getElementsByClassName('my_buttons_class')).forEach((button) => {
     button.addEventListener('click', (e)=>{
           e.preventDefault();
           console.log(e.target.getAttribute('data-element'));
     })
});

<button class="my_buttons_class" data-element="some json">My button text</button>

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前