javascript - 当<a>包含使用javascript的子元素时如何获取<a>标签的 'aria-label'属性

<分区>

我正在尝试读取 anchor 标记的“aria-label”属性。但是我得到空值，因为我的代码读取子元素(<use></use>)而不是父元素(<a></a>)。下面是我的 HTML 和 js 代码。

HTML

var inputs = document.querySelectorAll("a");
for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener("click", function(e) {
    console.log(inputs[i].getAttribute("aria-label"));
  });
}

<a href="#" role="menuitem" id="main-6" aria-haspopup="true" aria-label="Choose your country site">
  <svg class="header-redirect--icon-w">
     <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-country"></use>
  </svg>
  <i class="i-globe-w"></i>
</a>

最佳答案

勾选这个，需要在点击事件回调中引用这个

var inputs = document.querySelectorAll("a");
console.log(inputs.length);
for(var i = 0; i < inputs.length; i++){
    inputs[i].addEventListener("click", function(e){
        console.log(this.getAttribute("aria-label"));
    });     
}

<a href="#" role="menuitem" id="main-6" aria-haspopup="true" aria-label="Choose your country site">
    <svg class="header-redirect--icon-w">
           <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-country"></use>
    </svg>
    <i class="i-globe-w"></i>
    test
</a>

关于javascript - 当<a>包含使用javascript的子元素时如何获取<a>标签的 'aria-label'属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46156033/

上一篇：html - Angular 中的响应式页脚带有始终位于页面底部的 Bootstrap 。不粘

下一篇：html - 即使图标被隐藏也保持相同的宽度

相关文章：

php - 如何在页面加载后立即提交表单

javascript - 使用 d3.request 读取包含特殊字符的文本文件

javascript - 如何从 Html Select 标签中隐藏第一项

html - :after pseudo-element not appearing

javascript - 警报开关 Jquery

javascript - 如何判断字母是否在字符串中-javascript

html - 在 <div> 内滚动背景图片

css - 如何删除标签自动间距

ios - Swift 启动屏幕上出现不需要的标签

java - 如何创建具有正确宽度和高度的垂直标签？