js 点击a标签 获取a的自定义属性方法

获取 <a> 标签的自定义属性是 JavaScript 中常见的需求之一，可以使用以下步骤和示例来实现：

步骤

1. 首先，需要给 <a> 标签添加自定义属性，例如添加 data-* 属性，其中 * 替换为具体的属性名，例如 data-link。

2. 接着，在 JavaScript 中，可以通过获取对应 <a> 标签的 DOM 元素节点，然后获取该节点的自定义属性来实现获取自定义属性的值的功能。

示例一

HTML 代码：

<a href="#" data-link="https://www.example.com">前往例子网站</a>

JavaScript 代码：

const linkElement = document.querySelector('a');
const link = linkElement.getAttribute('data-link');
console.log(link); // 输出：https://www.example.com

示例二

HTML 代码：

<a href="#" data-link="https://www.example.com" onclick="handleClick(event)">前往例子网站</a>

JavaScript 代码：

function handleClick(event) {
  event.preventDefault();
  const link = event.target.getAttribute('data-link');
  console.log(link); // 输出：https://www.example.com
}

在示例二中，通过给 <a> 标签添加 onclick 属性，来调用 JavaScript 函数 handleClick。在 handleClick 函数中，通过 event.target 来获取当前被点击的元素节点，即 <a> 标签的节点，然后就可以获取该节点的 data-link 属性值来实现获取自定义属性的功能了。

注意：上述示例中的 console.log 语句只是为了演示输出获取到的结果，实际使用时可能需要根据需求做出相应的处理。