JavaScript DOM 获取设置属性
在本教程中，您将学习如何在 JavaScript 中获取、设置和删除 HTML 元素的属性。
使用属性
属性 是在 HTML 元素的开始标记中使用的特殊词，用于控制标记的行为或提供有关标记的附加信息。
JavaScript 提供了几种方法来添加、删除或更改 HTML 元素的属性。 在以下部分中，我们将详细了解这些方法。
获取元素的属性值
getAttribute() 方法用于获取元素上某个属性的当前值。
如果元素上不存在指定的属性，则返回null。 这是一个例子：
<a href="https://www.google.com/" target="_blank" id="myLink">Google</a>
<script>
// 按 ID 属性选择元素
var link = document.getElementById("myLink");
// 获取属性值
var href = link.getAttribute("href");
alert(href); // 输出： https://www.google.com/
var target = link.getAttribute("target");
alert(target); // 输出： _blank
</script>JavaScript 提供了几种不同的方法来选择页面上的元素。 请查看 JavaScript DOM 选择器 章节以了解更多信息。
设置元素的属性
setAttribute() 方法用于设置指定元素的属性。
如果元素上已经存在该属性，则更新该值； 否则将添加具有指定名称和值的新属性。 以下示例中的 JavaScript 代码将向 <button> 元素添加 class 和 disabled 属性。
<button type="button" id="myBtn">Click Me</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">Tutorial Republic</a>
<script>
// 选择元素
var link = document.getElementById("myLink");
// 更改 href 属性值
link.setAttribute("href", "http://www.qyoo.cn");
</script>从元素中移除属性
removeAttribute() 方法用于从指定元素中移除一个属性。
以下示例中的 JavaScript 代码将从锚元素中删除 href 属性。
<a href="https://www.google.com/" id="myLink">Google</a>
<script>
// 选择元素
var link = document.getElementById("myLink");
// 删除 href 属性
link.removeAttribute("href");
</script>Advertisements