在Web开发中，JavaScript和CSS是两个密切相关的技术。JavaScript可以通过多种方式调用CSS，从而实现丰富的动态效果和交互功能。以下是一些实用的技巧，帮助您轻松掌握JavaScript调用CSS的方法。
1. 通过JavaScript直接修改样式
JavaScript可以直接修改元素的样式属性，使页面元素根据需求动态改变外观。
示例代码：
// 获取页面元素
var element = document.getElementById(“myElement”);
// 修改样式属性
element.style.color = “red”;
element.style.fontSize = “24px”;
在上面的代码中，我们首先通过
getElementById
方法获取了页面中的某个元素，然后通过
style
属性直接修改了该元素的颜色和字体大小。
2. 使用CSS类控制样式
通过JavaScript动态添加或删除元素的类，可以控制元素的样式。
示例代码：
// 获取页面元素
var element = document.getElementById(“myElement”);
// 添加类
element.classList.add(“new-class”);
// 删除类
element.classList.remove(“old-class”);
在上述代码中，我们通过
classList.add
方法为元素添加了一个新类
new-class
，通过
classList.remove
方法删除了一个旧类
old-class
。
3. 使用CSS样式表
通过JavaScript创建或修改样式表，可以更灵活地控制页面样式。
示例代码：
// 创建样式表
var styleSheet = document.createElement(“style”);
styleSheet.type = “text/css”;
styleSheet.innerText = “p { color: blue; }”;
// 将样式表添加到文档中
document.head.appendChild(styleSheet);
在这段代码中，我们首先创建了一个新的