JavaScript DOM 获取/设置属性

Created: October-14, 2018

在本教程中，你将学习如何从 JavaScript 中获取、设置和删除 HTML 元素中的属性。

使用属性

属性是一个 HTML 元素的开始标记中用来控制标签的行为或提供关于标记的其他信息的特殊字词。

JavaScript 提供了几种添加、删除或更改 HTML 元素属性的方法。在以下介绍中，我们将详细了解这些方法。

获取元素的属性值

getAttribute() 方法用于获取元素上属性的当前值。

如果元素上不存在指定的属性，则返回 null 。这是一个例子：

<a href="https://www.google.com/" target="_blank" id="myLink">Google</a>

<script>
    // Selecting the element by ID attribute
    var link = document.getElementById("myLink");
    
    // Getting the attributes values
    var href = link.getAttribute("href");
    alert(href); // Outputs: https://www.google.com/
    
    var target = link.getAttribute("target");
    alert(target); // Outputs: _blank
</script>

JavaScript 提供了几种不同的方法来选择页面上的元素。请查看 JavaScript DOM 选择器章节以了解有关它们的更多信息。

在元素上设置属性

setAttribute() 方法用于在指定元素上设置属性。

如果元素上已存在该属性，则更新该值; 否则添加具有指定名称和值的新属性。以下示例中的 JavaScript 代码将向元素 <button> 添加 class 和 disabled 属性。

<button type="button" id="myBtn">Click Me</button>

<script>
    // Selecting the element
    var btn = document.getElementById("myBtn");
    
    // Setting new attributes
    btn.setAttribute("class", "click-btn");
    btn.setAttribute("disabled", "");
</script>

同样，你可以使用 setAttribute() 方法更新或更改 HTML 元素上现有属性的值。以下示例中的 JavaScript 代码将更新锚（<a>）元素的已有属性 href 的值。

<a href="#" id="myLink">Tutorial Republic</a>

<script>
    // Selecting the element
    var link = document.getElementById("myLink");
    
    // Changing the href attribute value
    link.setAttribute("href", "http://www.tastones.com");
</script>

从元素中删除属性

removeAttribute() 方法用于从指定元素中删除属性。

以下示例中的 JavaScript 代码将从锚元素中删除 href 属性。

<a href="https://www.google.com/" id="myLink">Google</a>

<script>
    // Selecting the element
    var link = document.getElementById("myLink");
    
    // Removing the href attribute
    link.getAttribute("href");
</script>