HTML语言只是一种标记语言，不能执行任何功能，也不能根据各种动态事件执行代码。为此，我们必须使用JavaScript来改变任何HTML元素的CSS样式，因为HTML自己无法做到这一点。
我们需要改变CSS并对HTML元素进行操作的原因可能有很多，可能是动态加载样式表，可能是在用户点击时改变按钮的颜色，也可能是在JavaScript中编写CSS。所有这些变化都可以通过JavaScript来完成。在这篇文章中，我们将看到用JavaScript访问CSS并改变它的各种方法。
使用JavaScript来改变CSS
在JavaScript中，有各种方法可以帮助我们访问HTML元素，通过这些方法我们可以操纵CSS的值。下面将结合实例解释其中的一些方法。
使用getElementsByClassName()
getElementByClassName()方法将一个字符串作为类名，在整个HTML文档中搜索并返回具有相同类名的元素。一旦确定了类名，我们就可以改变CSS属性，如下面的例子所示。
HTML
<html>
<div class="col-md-12">
<div class="p-3">
<label>Input Box:</label><br>
<input type="text" class="border_class" id="border" value="500">
<button class="ml-3" onclick="changeBorder()">Change Border</button>
</div>
</div>
</html>
JavaScript
<script>
function changeBorder() {
document.getElementsByClassName("border_class")[0].style.borderColor = "Green";
document.getElementsByClassName("ml-3")[0].style.backgroundColor = "Yellow";
}
</script>
这里我们通过类名搜索了HTML元素，并使用style.backgroundColor和style.borderColor改变了这些元素的CSS属性。
输出
使用getElementById()方法
另一种方法是getElementById()，它可以搜索所有具有类似id的HTML元素，并对它们执行指定的功能。大多数情况下，各种div都被分配了id，这些id都是用这个方法搜索出来的。这是开发人员使用最多的方法，下面是一个例子。
HTML
<html>
<div class="col-md-12">
<div class="p-3" id="box1">
<label>Input Box:</label><br>
<input type="text" class="border_class" id="border" value="500">
<button class="ml-3" id="btn" onclick="styleChange()">Change Border</button>
</div>
</div>
</html>
JavaScript
<script>
function styleChange() {
document.getElementById("border").style.backgroundColor = "Yellow";
document.getElementById("border").style.borderColor = "Red";
document.getElementById("btn").style.backgroundColor = "Green";
document.getElementById("btn").style.color = "White";
document.getElementById("btn").style.borderColor = "Yellow";
}
</script>
在这里，我们已经使用该方法使用他们的id搜索所有的元素，并使用style改变CSS属性。
输出
使用querySelector()
另一个和上面两个方法一样的方法是**querySelector()**方法，它可以通过类名、id名甚至是HTML标签来搜索，但它只返回提到的第一个HTML元素来搜索。下面是使用querySelector的方法。
document.querySelector("# id of div");
document.querySelector(". css class name ");
document.querySelector("HTML tag like: div>");
下面是一个querySelector()的例子，以及它如何与类名、id等一起使用。
HTML
<html>
<div class="col-md-12">
<div class="p-3" id="box1">
<label>Input Box:</label><br>
<input type="text" class="border_class" id="border" value="500">
<button class="ml-3" id="btn" onclick="styleChange()">Change Border</button>
</div>
</div>
</html>
JavaScript
<script>
function styleChange() {
document.querySelector("#border").style.backgroundColor = "Yellow"
document.querySelector(".ml-3").style.backgroundColor = "Green"
}
</script>
这里我们使用querySelector()方法来搜索div的类和id，并改变它们的CSS属性。
输出
结论
改变CSS的原因有很多，最好的方法是使用JavaScript，因为它可以很容易地访问HTML的元素并改变它们的CSS属性。在这篇文章中，我们讨论了如何使用JavaScript来改变CSS，以及JavaScript中提供的各种改变HTML元素值的方法。这些方法使开发者的工作变得简单，并使网页更加动态。通过这些方法，我们可以很容易地改变点击时的按钮颜色、背景颜色、字体颜色等，并进一步操作CSS属性。
