控制CSS的方法主要分为以下几个方面：
-
操作DOM元素：通过JavaScript中的
document对象获取HTML元素，然后修改其样式属性来实现控制CSS的效果。 -
操作样式表：通过JavaScript中的
<style>标签或<link>标签获取样式表，然后修改其中的样式规则来实现控制CSS的效果。
下面分别对这两个方面进行详细讲解：
操作DOM元素
DOM（Document Object Model）是HTML页面的树形结构，通过操作DOM元素来实现控制CSS的作用。通过JavaScript中的document对象可以访问DOM元素，通过修改DOM元素的样式属性来控制CSS。例如：
示例1：
<!DOCTYPE html>
<html>
<head>
<title>操作DOM元素控制CSS样式</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 50px auto;
}
</style>
<script>
function changeColor() {
var box = document.querySelector('.box');
box.style.backgroundColor = 'blue';
}
</script>
</head>
<body>
<div class="box"></div>
<button onclick="changeColor()">点击改变背景颜色</button>
</body>
</html>
上面的示例中，定义了一个类名为.box的div元素，并设置了样式属性background-color: red;，然后我们通过document.querySelector('.box')选择器选择到了这个div元素，并在函数changeColor()中修改了它的背景颜色为蓝色box.style.backgroundColor = 'blue';，点击按钮后即可实现控制CSS的效果。这样就实现了通过操作DOM元素控制CSS样式的作用。
操作样式表
样式表是HTML页面中的CSS代码，通过JavaScript中<style>标签或<link>标签获取样式表，然后修改其中的样式规则来实现控制CSS的效果。例如：
示例2：
<!DOCTYPE html>
<html>
<head>
<title>操作样式表控制CSS样式</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 50px auto;
}
</style>
<script>
function changeColor() {
var style = document.getElementsByTagName('style')[0];
var cssText = style.innerHTML.replace(/red/g, 'blue');
style.innerHTML = cssText;
}
</script>
</head>
<body>
<div class="box"></div>
<button onclick="changeColor()">点击改变背景颜色</button>
</body>
</html>
上面的示例中，我们通过document.getElementsByTagName('style')[0]选择器选择了页面中的样式表，然后通过正则表达式替换Red为Blue，最后将修改后的样式规则设置回样式表中的CSS代码，实现了控制CSS的作用。这样就实现了通过操作样式表控制CSS样式的作用。
综上所述，通过以上两种方法，我们可以实现控制CSS的作用。