JavaScript调用CSS是Web开发中常见的操作之一。通过JavaScript来改变文档样式，可以让网页更加动态和富有交互性。本文将介绍JavaScript调用CSS的基本方式和常见操作，并通过举例说明来让读者更加深入理解。
JavaScript可以使用DOM API来调用CSS样式。DOM API是JavaScript操作网页元素的标准接口，它可以让我们以编程的方式来修改网页结构和样式。其中最常用的方法是使用Element.style属性来修改元素的CSS样式。比如，我们可以通过下面的代码来改变一个按钮的背景颜色：
上面的代码中，我们首先获取了id为“myButton”的按钮元素，并通过style属性来修改其backgroundColor属性。这样就能使按钮的背景颜色变成红色。
除了Element.style属性外，我们还可以使用Element.className属性来修改元素的CSS类。CSS类是一组具有相同样式规则的元素，我们可以将这些规则定义在CSS样式表里面，并通过JavaScript来动态修改元素的类名。比如，我们可以通过下面的代码来为一个div元素添加一个特定的CSS类：
上面的代码中，我们获取了id为“myDiv”的div元素，并将其className属性设置为“myClass”。通过这个方式，我们可以在CSS样式表中定义一个“myClass”类，并通过JavaScript来动态地将其应用到任意一个元素上。这样就能实现整体样式控制，减少样式代码的冗余。
除了Element.style属性和Element.className属性，我们还可以使用Document.styleSheets对象来直接操作CSS样式表。Document.styleSheets对象可以让我们获取当前页面中所有的CSS样式表，并对其进行增、删、改、查等操作。比如，我们可以通过下面的代码来动态插入一段新的CSS规则：
上面的代码中，我们首先构造了一条CSS规则“h1 { color: red; }”，然后创建了一个style标签，并通过appendChild方法将规则文本添加到该标签中。最后，我们将该标签添加到head标签中，从而让新的CSS规则生效。通过这种方式，我们可以动态改变DOM的样式，并为网页增加交互性和动态效果。
总体来说，通过JavaScript调用CSS样式是Web开发中非常有用的技术。除了上面介绍的属性和对象外，还有很多方法可以用于动态修改样式，比如使用document.querySelector方法来查找符合特定规则的元素，并修改其样式。使用这些技术，我们可以创造出更加丰富、动态、漂亮的Web页面，提高用户的使用体验。
JavaScript可以使用DOM API来调用CSS样式。DOM API是JavaScript操作网页元素的标准接口，它可以让我们以编程的方式来修改网页结构和样式。其中最常用的方法是使用Element.style属性来修改元素的CSS样式。比如，我们可以通过下面的代码来改变一个按钮的背景颜色：
<button id="myButton">Click me!</button>
<br>
<script>
var button = document.getElementById('myButton');
button.style.backgroundColor = 'red';
</script>上面的代码中，我们首先获取了id为“myButton”的按钮元素，并通过style属性来修改其backgroundColor属性。这样就能使按钮的背景颜色变成红色。
除了Element.style属性外，我们还可以使用Element.className属性来修改元素的CSS类。CSS类是一组具有相同样式规则的元素，我们可以将这些规则定义在CSS样式表里面，并通过JavaScript来动态修改元素的类名。比如，我们可以通过下面的代码来为一个div元素添加一个特定的CSS类：
<div id="myDiv">Hello world!</div>
<br>
<script>
var div = document.getElementById('myDiv');
div.className = 'myClass';
</script>上面的代码中，我们获取了id为“myDiv”的div元素，并将其className属性设置为“myClass”。通过这个方式，我们可以在CSS样式表中定义一个“myClass”类，并通过JavaScript来动态地将其应用到任意一个元素上。这样就能实现整体样式控制，减少样式代码的冗余。
除了Element.style属性和Element.className属性，我们还可以使用Document.styleSheets对象来直接操作CSS样式表。Document.styleSheets对象可以让我们获取当前页面中所有的CSS样式表，并对其进行增、删、改、查等操作。比如，我们可以通过下面的代码来动态插入一段新的CSS规则：
<script>
var newRule = 'h1 { color: red; }';
var style = document.createElement('style');
style.appendChild(document.createTextNode(newRule));
document.head.appendChild(style);
</script>上面的代码中，我们首先构造了一条CSS规则“h1 { color: red; }”，然后创建了一个style标签，并通过appendChild方法将规则文本添加到该标签中。最后，我们将该标签添加到head标签中，从而让新的CSS规则生效。通过这种方式，我们可以动态改变DOM的样式，并为网页增加交互性和动态效果。
总体来说，通过JavaScript调用CSS样式是Web开发中非常有用的技术。除了上面介绍的属性和对象外，还有很多方法可以用于动态修改样式，比如使用document.querySelector方法来查找符合特定规则的元素，并修改其样式。使用这些技术，我们可以创造出更加丰富、动态、漂亮的Web页面，提高用户的使用体验。