使用 Java 脚本更改 CSS 属性

  1. 在 JavaScript 中使用 getElementsByClassName 更改 CSS 属性
  2. 在 JavaScript 中使用 getElementById 更改 CSS 属性
  3. 在 JavaScript 中使用 querySelector() 更改 CSS 属性
  4. 结论

超文本标记语言(HTML)是静态的,通常很笨。这意味着它不具有根据动态条件执行代码段的功能。它没有提供 if 条件块来显示隐藏某些 HTML 元素或标签(如果满足条件)的规定。对于这种情况,我们可能需要依靠 JavaScript 或 jQuery 来更改 HTML 元素的 CSS 样式。

要更改 HTML 元素的样式,例如说 <div>,我们应该唯一地选择 <div> 或特定的 HTML 元素。现在,我们可以使用文档界面的以下功能来执行此操作。

在 JavaScript 中使用 getElementsByClassName 更改 CSS 属性

getElementsByClassName 会搜索整个 HTML 文档,并返回具有该函数参数中传递的类名的所有 HTML 元素的数组。我们还可以在元素上使用它来查找具有指定 CSS 类名称的子元素。getElementByClassName 的语法如下。

document.getElementsByClassName("green-class"));

使用 element.style 设置样式

一旦我们唯一地标识了元素,就可以使用 .style.className 方法来更改其 CSS 样式。请参考以下示例。

<div class="col-md-12">
  <div class="p-3">
      <label>Input String:</label><br>
      <input type="text" class="input-blue-border" id="b1" value="120">
      <button class="ml-3" onclick="changeStyle()">Change Border</button>
  </div>
</div>
function changeStyle() {
  document.getElementsByClassName("input-blue-border")[0].style.borderColor = "red";
}

请注意,在 changeStyle() 方法中,我们使用 document.getElementsByClassName("input-blue-border") 方法来查询输入元素。它返回带有选定元素的数组。我们选择数组的第一个元素,并使用 .style.borderColor ="red"更改其边框颜色。

使用 element.className 设置样式

可以使用 element.className 来更改 HTML 元素的各种样式参数,方法是将这些元素合并为一个类,然后使用 element.className 将类名分配给所选元素。此方法很有用,尤其是在需要在输入字段中显示错误的情况下。在这种情况下,我们需要将输入字段的边框颜色更改为红色,并将输入的内部文本更改为红色。因此,我们可以将这些样式作为一个类合并,并使用 element.className 属性将它们分配给元素。以下代码说明了错误处理。

<div class="col-md-12">
  <div class="p-3">
      <label>Input String:</label><br>
      <input type="text" class="input-blue-border" id="b1" value="120">
      <button class="ml-3" onclick="changeClass()">Change Border</button>
  </div>
</div>
function changeClass() {
  document.getElementsByClassName("input-blue-border")[0].className = "input-error";
}

input-error 类具有几个属性,这些属性将输入字段的边框颜色和字体颜色设置为红色。

备注

  • getElementByClassName() 方法返回一个元素数组,这些元素限定了作为参数传递的类名值。
  • 通过在此方法返回的数组上进行迭代,将样式更改应用于多个元素时,可以使用 getElementByClassName()
  • 选择元素后,element.style.<style attribute> 就会给选中的元素设置特定的样式属性。
  • 同样,element.className 通过将样式属性组合为 CSS 类,可以帮助对选定的 HTML 元素设置多个样式更改。

在 JavaScript 中使用 getElementById 更改 CSS 属性

如果我们为 HTML 元素分配了唯一的 ID,则可以查询该元素,并使用 Document 接口的 getElementById() 函数更改其样式。它是 Web 开发人员使用最广泛的方法。通常,分配给 div 的 id 将保持唯一,以便在执行 getElementById() 函数时,不会选择其他 HTML 元素。getElementById() 的语法如下所示。

document.getElementById("parent-1"));

在这种情况下,由于我们选择唯一的元素,因此样式更改很容易进行。以下代码描述了这些方法。它与前面提到的相似,不同之处在于我们查询元素的方式。在这里,我们唯一标识带有元素 ID 的 HTML 节点。

document.getElementById("b1").style.borderColor = "red";
document.getElementById("b1").className = "input-error";

备注

  • getElementByClassName() 不同,getElementById() 方法仅返回一个对象,该对象是查询选择的节点元素。
  • 为了让 getElementById() 方法发挥作用,目标 HTML 需要有一个 id 属性。
  • 如果多个 HTML 节点具有相同的 id,则 getElementById() 方法将返回具有指定 id 的第一个元素。
  • getElementByClassName() 不同,样式更改可以直接应用在 getElementById() 函数返回的对象上,因为它返回的是对象而不是数组。

在 JavaScript 中使用 querySelector() 更改 CSS 属性

querySelector() 方法是元素选择机制提供的功能的超集。它具有 getElementsByClassName()getElementById() 两种方法的组合功能。使用这种方法,我们可以在编写 CSS 类时以相同的方式选择 HTML 元素。它可以用于按 id,按类甚至按 HTML 标签选择元素。就返回类型而言,它的行为类似于 getElementById() 方法。querySelector() 仅返回满足参数中提到的条件的第一个 HTML 节点元素。用于 querySelector() 的语法如下:

document.querySelector("#<id of div>");
document.querySelector(".<css class name>");
document.querySelector("<HTML tag eg: div>");

因此,这里也可以通过添加 .style.borderColor.className 将样式应用于选定的 HTML 元素。如果我们使用相同的 HTML 结构,并将 onclick 方法更改为 changeStyle(),则可以通过添加以下 JavaScript 中所述的代码来动态地带来新样式:

<button class="ml-3" onclick="changeStyle()">Change Border</button>
function changeStyle() {
  document.querySelector(".input-blue-border").style.borderColor = "red";
}

同样,如果要更改输入的 CSS 类,而不仅仅是更改样式,则需要在上面的示例中使用 .className() 属性而不是 .style.borderColor

<button class="ml-3" onclick="changeClass()">Change Border</button>
function changeClass() {
  document.querySelector(".input-blue-border").className = "input-error";
}

备注

  • 值得注意的是 document.querySelector() 函数的返回类型。它不是返回满足查询条件的所有 HTML 对象,而是返回适合查询条件的第一个元素。
  • 使用 querySelector() 的好处是我们可以在各种情况下使用它,可能是基于 HTML 元素的 ID 或 CSS 类,甚至带有 HTML 标签名进行查询。
  • querySelector() 可能无法动态改变多个满足查询条件的 div 的样式,因为它返回一个对象,而不是传递查询词的 HTML 元素数组。

结论

为了在运行时更改 HTML 元素的样式,我们可以使用所选 HTML 元素的 .style.className 属性。选择目标 HTML 节点时面临挑战。有多种方法可以唯一地选择 HTML 节点。我们可以使用 getElementsByClassName() 方法,该方法使用 CSS 类的名称来查询 HTML 节点。或通过为其分配 ID 并使用 .getElementById() 进行查询或使用多功能 querySelector() 方法来唯一选择一个元素,该方法可以适合所有情况,并根据传递给它的参数理解查询。