📌  相关文章
📜  JavaScript getAttribute()方法(1)

📅  最后修改于: 2023-12-03 15:01:37.616000             🧑  作者: Mango

JavaScript getAttribute() 方法

介绍

getAttribute() 方法是 JavaScript 中用于获取指定元素的属性值的方法，它可以获取 HTML 元素的标准属性和自定义属性的值，需要用到该方法的元素必须存在。

语法
element.getAttribute(attributeName)
  • attributeName：必须。一个字符串，表示要获取的属性的名称。
返回值

如果指定的属性存在，则该方法返回指定属性的值，如果该元素不存在此属性，则返回 null。

示例
<!DOCTYPE html>
<html>
  <body>
    <h1 id="header" custom-data="hello world">Hello World!</h1>
    <button onclick="getAttributeExample()">点击获取自定义属性</button>
    <p id="result"></p>
    <script>
      function getAttributeExample() {
        const header = document.getElementById("header");
        const customData = header.getAttribute("custom-data");
        document.getElementById("result").innerHTML = `自定义属性值为：${customData}`;
      }
    </script>
  </body>
</html>

点击按钮后会触发 getAttributeExample() 方法，该方法会通过 getElementById() 方法获取 id 为 "header" 的元素，然后使用 getAttribute() 方法获取自定义属性 "custom-data" 的值，并将其赋值给 p 标签的 innerHTML 属性，最终输出自定义属性值为 "hello world"。

注意事项
  • 该方法只能获取元素的属性值，不能设置属性值，如果要设置元素的属性值，可以使用 setAttribute() 方法。
  • 只有存在的属性才能被获取，不存在的属性获取时返回 null。