CSS 使用 JS 可以实现许多强大的功能，以下是详细的介绍：
CSS 中使用 JavaScript 的方式
内联样式：通过 HTML 元素的style 属性直接在元素上定义样式。<div style="color: red;">Hello World</div>，这种方式适用于简单的样式设置，但不利于代码的复用和维护。
内部样式表：将 CSS 样式写在 HTML 文档的<style> 标签内，如<style>body { background-color: lightblue; } h1 { color: red; }</style>，这种方式适用于小型项目或单个页面的样式定义，但对于大型项目可能会导致样式管理混乱。
外部样式表：将 CSS 样式写在独立的.css 文件中，然后在 HTML 文档中通过<link> 标签引入，这是最常见和推荐的方式，有利于代码的复用、维护和团队协作。<link rel="stylesheet" href="styles.css">。
通过 JavaScript 动态操作 CSS
修改元素的样式属性：可以使用 JavaScript 的style 属性来动态修改元素的样式。document.getElementById("myElement").style.color = "red"; 可以将 ID 为myElement 的元素的文字颜色设置为红色。
添加和删除类名：通过 JavaScript 的classList 属性可以方便地添加、删除或切换元素的类名，从而实现样式的变化。element.classList.add("active"); 可以给元素添加一个名为active 的类，而element.classList.remove("active"); 则可以移除该类。
响应用户交互：通过事件监听器，可以根据用户的操作实时调整样式。element.addEventListener('click', function() { this.classList.toggle('clicked'); }); 可以在元素被点击时切换clicked 类的添加和移除，从而实现点击效果的切换。
CSS-in-JS 技术
CSS-in-JS 是一种将 CSS 样式写在 JavaScript 文件里的技术，不单独使用.css、.less、.scss 等文件来处理样式，它允许开发者在 JavaScript 中利用模块声明、变量定义、函数调用等语言特性来扩展样式的定义，提供了更灵活和可扩展的样式管理方式。
常见的 CSS-in-JS 库有 styled-components、emotion、styled-jsx 等，这些库各有特点，styled-components 允许使用 JSX 语法定义 CSS 样式，每个样式规则绑定到一个特定组件；emotion 将 CSS 字符串嵌入到 JS 中，通过解析字符串生成样式规则对象。
CSS 与 JavaScript 的整合示例
以下是一个综合示例，展示了如何在 HTML 中创建结构，通过 CSS 设置基本样式，再通过 JavaScript 实现动态交互：
1、创建 HTML 结构：创建一个包含按钮和可变内容的div 元素的简单页面。
2、编写 CSS 样式：为按钮和div 元素设置初始样式，如按钮的颜色、大小，div 的背景色、宽度、高度等。
3、编写 JavaScript 代码：为按钮添加点击事件监听器，当按钮被点击时，通过 JavaScript 改变div 元素的样式，如背景颜色、内容等。
CSS 与 JavaScript 的结合为网页开发带来了极大的灵活性和交互性，通过合理运用上述技术和方法，开发者能够创造出更加丰富、动态和用户体验良好的网页应用。
