如何在CSS中嵌入JavaScript代码？

在网页开发中，有时需要通过 JavaScript 来动态添加 CSS 样式，以实现更灵活的页面效果，以下是几种常见的方法：

1、创建内联样式

操作步骤：使用 JavaScript 创建一个新的style 元素，设置其类型为text/css，然后通过innerHTML 属性添加 CSS 规则，最后将该style 元素插入到文档的头部。

示例代码：

     var style = document.createElement('style');
     style.type = 'text/css';
     style.innerHTML = 'h1 { color: red; }';
     document.head.appendChild(style);

适用场景：适用于需要快速添加少量特定元素的样式，且不希望影响其他元素的情况，但这种方法会将样式直接写在 HTML 中，不利于代码的复用和维护。

2、修改类名

操作步骤：先获取要修改样式的元素，然后使用classList 对象的add 和remove 方法来添加或移除特定的类名。

示例代码：

     var element = document.getElementById('myElement');
     element.classList.add('red');
     element.classList.remove('blue');

适用场景：当有一组预定义的 CSS 类可供切换时，这种方法非常有效，它能够保持 HTML 和 CSS 的分离，提升代码的可维护性和可读性。

3、直接修改元素样式

操作步骤：获取要修改样式的元素，然后直接设置其style 属性的各个属性值。

示例代码：

     var element = document.getElementById('myElement');
     element.style.color = 'red';
     element.style.fontSize = '16px';

适用场景：适用于仅需修改少量样式的情况，如果需要添加大量的 CSS 样式规则，则推荐使用前面提到的添加内联样式的方法。

4、删除CSS样式

操作步骤：可以通过删除元素的 CSS 类名或内联样式来删除 CSS 样式，对于类名，使用classList.remove 方法；对于内联样式，将相应的属性设置为空字符串。

示例代码：

     var element = document.getElementById('myElement');
     element.classList.remove('red');
     element.style.color = '';

5、使用外部库（如jQuery）

操作步骤：如果使用了 jQuery 库，可以更简洁地完成这些操作，使用css 方法设置内联样式，使用addClass 和removeClass 方法添加或移除 CSS 类。

示例代码：

     $(document).ready(function() {
         $('#myDiv').css({'color': 'red', 'font-size': '20px'});
         $('#myDiv').addClass('highlight');
     });

适用场景：当项目中已经使用了 jQuery 库时，可以利用其提供的方法更方便地进行操作。

通过以上方法，可以在JavaScript中灵活地添加、修改或删除CSS样式，从而实现对网页样式的动态控制。