在 JavaScript 中設定 HTML 表單元素的樣式

1. 在 JavaScript 中為 HTML 元素新增樣式
2. 將樣式應用於 JavaScript 中具有類名的元素
3. 將樣式應用於 JavaScript 中的標籤

在執行時為 HTML 元素設定自定義樣式的用例之一是在表單中執行驗證。我們需要以紅色突出顯示該元素並顯示驗證文字，例如 Username field cannot be left empty。有多種方法可以在執行時使用 JavaScript 為 HTML 元素設定樣式引數。我們可以新增新樣式並更改現有樣式。以下是我們可以使用 JavaScript 為 HTML 元素設定 CSS 樣式的幾種方法。

在 JavaScript 中為 HTML 元素新增樣式

我們可以使用 JavaScript .style 屬性更改元素的樣式。在此之前，我們需要查詢 HTML 元素並設定 .style 屬性。在 JavaScript 中有多種查詢 HTML 元素的方法，如下所示，但最常用的是 document.getElementById() 方法。

• getElementById()：JavaScript 中的文件介面用於根據其 id 查詢 HTML 元素。通常，在設計網頁時，開發人員會為 HTML 元素分配一個唯一的 id。getElementById() 返回具有在 getElementById() 函式的引數中指定的 id 的元素。如果有更多具有相同 id 的元素，則返回具有指定 id 的第一個元素。
• getElementsByClassName()：查詢 HTML 元素的另一種方法是使用其指定的類名。這些是通常用於裝飾元素的 CSS 類名稱。由於多個 HTML 元素可以具有相同的 CSS 類名稱，因此該函式返回一組 HTML 元素。我們可以選擇將特定樣式更改或新增到一個元素或由 getElementsByClassName() 函式返回的所有元素。
• getElementsByName()：類似於我們使用 CSS 類名稱選擇 HTML 元素的方式，getElementsByName() 函式使用 name 屬性來過濾預期的 HTML 元素。在這種情況下，可能存在多個具有相同名稱的 HTML 元素。因此，它返回一組 HTML 元素，其 name 屬性與傳入其引數的元素相同。
• getElementsByTagName()：用於我們需要選擇特定 HTML 標籤的情況，例如 <div>、<p>、<li> 標籤等。它可以方便地應用樣式或設定一次性為所有 <div> 元素新增樣式。getElementsByTagName() 函式返回一個元素陣列，其中標籤名稱在引數中傳遞給函式。可能有多個 HTML 標籤，其樣式可能需要一次性更改。
• querySelector()：就像檢索元素的主要方法。要了解此 JavaScript 函式接受的引數的用法，請考慮使用選擇器來查詢 CSS 中的 HTML 元素。我們可以使用標籤名稱的組合，例如 document.querySelector("div span")（選擇 div 內的所有跨度），document.querySelector("#elementID")（根據元素的 id 查詢元素)、document.querySelector(".sample-css")（查詢具有 CSS 類名 sample-css 的元素）等。它返回滿足作為引數傳遞給函式的條件的第一個元素。
• querySelectorAll：除了返回型別之外，在所有方面都類似於 querySelector()。與在 querySelector() 函式中只返回滿足條件的第一個元素不同，querySelectorAll() 函式返回所有滿足方法引數中提到的條件的 HTML 元素。選擇 HTML 元素後，我們使用 .style 屬性，後跟我們希望更改或新增的樣式名稱。例如，在下面的程式碼中，我們嘗試更改 id 為 username 的元素的背景色。

<div id="username">
    <label>User Name: </label>
    <input type="text" id="username" name="UserName">
</div>

window.onload = function() {
  document.getElementById('username').style.backgroundColor = 'green';
}

如果選定的 HTML 元素已經設定了樣式屬性（例如，背景顏色），則以下程式碼將更改它。如果它沒有任何樣式屬性，則 JavaScript 程式碼會在執行時新增新樣式。

將樣式應用於 JavaScript 中具有類名的元素

我們可以通過 JavaScript 函式 getElementsByClassName() 使用類名查詢元素。選擇元素後，我們可以使用 .style 屬性新增或更改元素的樣式。當我們需要在元素的特定 CSS 類中具有額外的 CSS 屬性時，將應用此方法。下面的程式碼描述了用法。

<div id="username" class="blue-bg">
    <label>User Name: </label>
    <input type="text" id="username" name="UserName">
</div>

window.onload = function() {
  document.getElementsByClassName('blue-bg')[0].style.backgroundColor = 'green';
}

將樣式應用於 JavaScript 中的標籤

如果我們必須為所有 div 或所有 span 新增樣式，然後我們可以使用 .getElementsByTagName() 函式。它查詢 DOM 以獲取標籤名稱。它返回滿足作為引數傳遞的標籤名稱的 HTML 元素的集合。一旦函式返回 HTML 元素，我們就可以使用它的索引將 style 屬性應用到該元素。下面的程式碼對其進行了詳細說明。

<div id="output">Hello World!!</div>
<form name="LoginForm">
    <div id="username" class="blue-bg">
        <label>User Name: </label>
        <input type="text" id="username" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
    <div>
        <label>Description: </label>
        <textarea name="description"></textarea>
    </div>
    <div>
        <label>Occupation: </label>
        <select id="occupationSelect" autofocus>
            <option>Student</option>
            <option>Teacher</option>
            <option>Engineer</option>
        </select>
    </div>
</form>

window.onload = function() {
  document.getElementsByTagName('div')[0].style.backgroundColor = 'green';
}

在執行上面的程式碼時，第一個 div (<div id="output">Hello World!!</div>) 將其背景顏色設定為綠色。請注意，當我們針對第一個 div 時，我們將索引用作 0（document.getElementsByTagName("div")[0]）。同樣，我們也可以使用 document.getElementsByTagName("body")[0].style.backgroundColor = "green" 為 body 標籤分配樣式屬性。由於一個 HTML 文件中只允許使用一個 body 標籤，我們可以直接查詢 body 元素並使用 document 介面的 .body 屬性對其應用樣式屬性。因此程式碼看起來像 document.body.style.backgroundColor = "green"。