使用 Java 脚本更改 CSS 属性

  2. 贴士文章
  3. JavaScript 贴士
  4. 使用 Java 脚本更改 CSS 属性
Nithin Krishnan 2023年10月12日
JavaScript JavaScript CSS
  1. 在 JavaScript 中使用 getElementsByClassName 更改 CSS 属性
  2. 在 JavaScript 中使用 getElementById 更改 CSS 属性
  3. 在 JavaScript 中使用 querySelector() 更改 CSS 属性
  4. 结论
使用 Java 脚本更改 CSS 属性

超文本标记语言（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() 方法来唯一选择一个元素，该方法可以适合所有情况，并根据传递给它的参数理解查询。