在 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"。