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

Nithin Krishnan 2023年1月30日 2021年7月4日
  1. 在 JavaScript 中為 HTML 元素新增樣式
  2. 將樣式應用於 JavaScript 中具有類名的元素
  3. 將樣式應用於 JavaScript 中的標籤
在 JavaScript 中設定 HTML 表單元素的樣式

在執行時為 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";
}
注意
這裡,getElementsByClassName("blue-bg") 函式返回一個元素陣列。因此,有必要選擇我們打算應用樣式的元素的索引。如果 style 屬性已經由某個 CSS 類或內聯樣式設定,.style 屬性將覆蓋它。如果尚未設定,它將新增一個新屬性來設定目標 HTML 元素的樣式。

將樣式應用於 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 時,我們將索引用作 0document.getElementsByTagName("div")[0])。同樣,我們也可以使用 document.getElementsByTagName("body")[0].style.backgroundColor = "green" 為 body 標籤分配樣式屬性。由於一個 HTML 文件中只允許使用一個 body 標籤,我們可以直接查詢 body 元素並使用 document 介面的 .body 屬性對其應用樣式屬性。因此程式碼看起來像 document.body.style.backgroundColor = "green"