JavaScript 中getAttr怎么用

在 JavaScript 中，getAttribute 方法用于获取元素的指定属性值。以下是有关 getAttribute 的一些基本用法和示例：

1. 使用 getAttribute 方法

这个方法可以获取任意属性的值（包括自定义属性）。使用时，需要先选择到相应的元素。

// 获取元素
const element = document.getElementById('yourElementId');

// 获取属性值
const attributeValue = element.getAttribute('attributeName');

console.log(attributeValue); // 输出属性值，例如 'value'

Copy
JavaScript

2. 获取常见的属性

以下是一些常见的属性示例：

<a id="myLink" href="https://example.com" data-info="example">点击这里</a>

Copy
HTML

const link = document.getElementById('myLink');

// 获取 href 属性
const hrefValue = link.getAttribute('href');
console.log(hrefValue); // 输出: "https://example.com"

// 获取自定义属性 data-info
const dataInfoValue = link.getAttribute('data-info');
console.log(dataInfoValue); // 输出: "example"

Copy
JavaScript

3. 获取不存在的属性

如果请求的属性不存在，getAttribute 方法将返回 null。

const nonExistent = link.getAttribute('non-existent-attribute');
console.log(nonExistent); // 输出: null

Copy
JavaScript

4. 使用 setAttribute 和 removeAttribute

除了获取属性，您还可以使用 setAttribute 来设置属性，使用 removeAttribute 来删除属性。

// 设置属性
link.setAttribute('target', '_blank'); // 设置 target 属性

// 删除属性
link.removeAttribute('data-info'); // 删除 data-info 属性

Copy
JavaScript

5. 注意事项

• getAttribute 方法在获取某些标准属性时，可能不会反映其实际的 DOM 属性值。例如，对于某些布尔属性（如 checked、disabled），应使用相应的 DOM 属性，如 element.checked。

总结

getAttribute 是一个非常有用的方法，可以用来获取 HTML 元素的属性值。结合 setAttribute 和 removeAttribute，您可以灵活地操作 DOM 元素的属性。

标签：
来源：