在 JavaScript 中更改按鈕顏色

1. HTML 中的按鈕
2. 在 JavaScript 中使用 style.background 更改按鈕顏色

本文將指導你通過各種方法更新按鈕顏色，以便你可以輕鬆開始更新網站上的按鈕。

HTML 中的按鈕

按鈕是任何網站的重要組成部分。你需要它們來執行各種功能，從傳送資訊和訪問更多內容到連結到網站的不同部分。

HTML 為你提供了幾種向網站新增按鈕的方法：按鈕標籤、錨連結以及按鈕和提交輸入型別。

HTML 中的 <button> 標籤定義了可以點選的按鈕。 <button> 標籤用於傳送內容。

影象和文字內容可以放在 <button> 標記內。按鈕可以使用 CSS 設定樣式。

在 JavaScript 中使用 style.background 更改按鈕顏色

getElementById() 是 JavaScript 提供的整合文件方法，它返回 id 與指定 id 匹配的元素物件。

語法：

getElementById($id)

$id 是一個強制引數，它指定必須匹配的 HTML 屬性的 id。如果找到對應的元素，則返回對應的 DOM 元素物件；否則，它返回 null。

現在，讓我們使用 getElementById() 提取按鈕節點元素。

<button onclick="changeColor()" id="btn">Change color</button>

function changeColor() {
    document.getElementById("btn").style.background='#5e2e2e';
}

在 changeColor 函式中，我們使用 getElementById 找出 DOM 中存在的按鈕元素。找到按鈕節點後，提取樣式物件並使用所需顏色更新背景屬性。

ReadOnly 樣式屬性以 CSSstyledClaration 物件的形式返回元素的線上樣式，該物件包含線上樣式屬性的屬性中定義的屬性的樣式的所有特徵的列表。

現在讓我們執行上面的程式碼並點選 Change color 按鈕。它會改變按鈕的顏色，看起來像這樣。

輸出：