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