使用 Java 脚本更改 CSS 属性
超文本标记语言（HTML）是静态的，通常很笨。这意味着它不具有根据动态条件执行代码段的功能。它没有提供 if 条件块来显示隐藏某些 HTML 元素或标签（如果满足条件）的规定。对于这种情况，我们可能需要依靠 JavaScript 或 jQuery 来更改 HTML 元素的 CSS 样式。
要更改 HTML 元素的样式，例如说 <div>，我们应该唯一地选择 <div> 或特定的 HTML 元素。现在，我们可以使用文档界面的以下功能来执行此操作。
getElementsByClassName 会搜索整个 HTML 文档，并返回具有该函数参数中传递的类名的所有 HTML 元素的数组。我们还可以在元素上使用它来查找具有指定 CSS 类名称的子元素。getElementByClassName 的语法如下。
document.getElementsByClassName("green-class"));
一旦我们唯一地标识了元素，就可以使用 .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 来更改 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 类具有几个属性，这些属性将输入字段的边框颜色和字体颜色设置为红色。
如果我们为 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";
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";
}
为了在运行时更改 HTML 元素的样式，我们可以使用所选 HTML 元素的 .style 或 .className 属性。选择目标 HTML 节点时面临挑战。有多种方法可以唯一地选择 HTML 节点。我们可以使用 getElementsByClassName() 方法，该方法使用 CSS 类的名称来查询 HTML 节点。或通过为其分配 ID 并使用 .getElementById() 进行查询或使用多功能 querySelector() 方法来唯一选择一个元素，该方法可以适合所有情况，并根据传递给它的参数理解查询。
相关文章
在 Angular 中上传文件
发布时间：2023/04/14 浏览次数：71 分类：Angular
-
本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条，并在上传完成时显示文件上传完成消息。
Angular 中所有 Mat 图标的列表
发布时间：2023/04/14 浏览次数：91 分类：Angular
-
本教程演示了在哪里可以找到 Angular 中所有 Mat 图标的列表以及如何使用它们。
Angular 2 中的复选框双向数据绑定
发布时间：2023/04/14 浏览次数：139 分类：Angular
-
本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。
在 AngularJS 中重新加载页面
发布时间：2023/04/14 浏览次数：142 分类：Angular
-
我们可以借助 windows.location.reload 和 reload 方法在 AngularJS 中重新加载页面。
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间：2023/04/14 浏览次数：78 分类：Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 AngularJS 中启用 HTML5 模式
发布时间：2023/04/14 浏览次数：150 分类：Angular
-
本文讨论如何在 AngularJS 应用程序上启用带有深度链接的 HTML5 模式。
在 AngularJs 中加载 spinner
发布时间：2023/04/14 浏览次数：107 分类：Angular
-
我们将介绍如何在请求加载时添加加载 spinner，并在 AngularJs 中加载数据时停止加载器。
在 Angular 中显示和隐藏
发布时间：2023/04/14 浏览次数：78 分类：Angular
-
本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时，我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。
在 Angular 中下载文件
发布时间：2023/04/14 浏览次数：104 分类：Angular
-
本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。
