JS获取和设置DOM属性 – JavaScript教程

上一章JavaScript教程请查看：JS DOM样式

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

JS使用属性

属性是在HTML元素的开始标记中使用的特殊单词，用于控制标记的行为或提供关于标记的附加信息。

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

获取元素的属性值

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

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

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

<script>
    // 通过ID属性选择元素
    var link = document.getElementById("myLink");
    
    // 获取属性值
    var href = link.getAttribute("href");
    alert(href); // : https://www.srcmini02.com/
    
    var target = link.getAttribute("target");
    alert(target); // : _blank
</script>

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

在元素上设置属性

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

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

<button type="button" id="myBtn">点击</button>

<script>
    // 选择元素
    var btn = document.getElementById("myBtn");
	
    // 设置新属性
    btn.setAttribute("class", "click-btn");
    btn.setAttribute("disabled", "");
</script>

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

<a href="#" id="myLink">SRCMINI</a>

<script>
    // 选择元素
    var link = document.getElementById("myLink");
	
    // 更改href属性值
    link.setAttribute("href", "https://www.srcmini02.com");
</script>

从元素中删除属性

方法的作用是：从指定的元素中删除一个属性。

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

<a href="https://www.srcmini02.com/" id="myLink">SRCMINI</a>

<script>
    // 选择元素
    var link = document.getElementById("myLink");
	
    // 删除href属性
    link.removeAttribute("href");
</script>