JavaScript setAttribute() 方法-它是什麼/如何使用它[示例]

JavaScript 中的 DOM 元素

JavaScript 使用 DOM 來查找頁面上的元素，以便它可以讀取和更新它們。通過引用 DOM 元素，可以讀取輸入的值，可以更新文本，或者可以移動或修改元素。

每個元素的樣式都是 DOM 的一部分——因此任何 CSS 屬性都可以更改，包括元素的顏色、背景、位置和方向。

JavaScript 還可以創建全新的元素並通過 DOM 將它們附加到頁面，同樣可以完全刪除元素。

使用 setAttribute() 更新 DOM 元素屬性

屬性是 HTML 元素中的值，用於配置元素的行為方式、為其分配值或以其他方式指示它在頁面上的作用。

此處提供標準 HTML 屬性的完整列表。

也可以設置自定義屬性，你可以根據自己的目的設置和讀取。

setAttribute() 方法語法

setAttribute(NAME, VALUE)

請注意：

• NAME 是您希望設置或更新的 HTML 屬性的名稱
• VALUE 是屬性將被設置為的值
  • VALUE 的所有值都將轉換為字符串
  • 如果使用布爾值，則無論是什麼值，存在的值都將被視為 TRUE，而空字符串將被視為 FALSE

setAttribute() 方法示例

下面的代碼示例演示了 setAttribute JavaScript 方法：

<input id="my-input">

<script>
    var myInput = document.getElementById("my-input");

    myInput.setAttribute("disabled", "");
    myInput.setAttribute("value", "This input has been disabled");
</script>

首先，一個帶有 id 的輸入 my-input 已定義。

JavaScript 代碼然後使用 document.getElementById 在 DOM 中定位該輸入元素 方法通過它的 id 屬性找到它。

輸入 然後使用它的 setAttribute 修改元素 方法——首先它被禁用，然後它的值被更新以讓用戶知道它被禁用了。

為什麼要從 Javascript 更新 DOM 元素？

您可能需要修改頁面元素的 HTML 屬性的原因有很多：

• 顯示和隱藏菜單
• 更改已讀通知的顏色
• 隱藏不適合屏幕的文字
• 調整圖片大小
• 為動畫移動屏幕上的對象
• 向對象添加 HTML 事件以啟用或禁用按鈕或更改其行為
• ……還有其他你能想到的原因——發揮創意！