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>