如何在CSS中调用JavaScript以实现动态样式效果？

CSS 本身不能直接调用 JavaScript，但可以通过多种方式实现 CSS 与 JavaScript 的交互，从而达到类似“调用”的效果，以下是几种常见的方法：

1、使用事件监听器：在 HTML 元素上添加事件监听器，当特定事件触发时执行 JavaScript 函数，通过onclick、onmouseover 等事件属性为按钮或图片等元素绑定点击、鼠标悬停等事件，进而调用相应的 JavaScript 函数来改变元素的样式或执行其他操作。

2、利用 CSS 动画监听：CSS 动画结束后会触发animationend 事件，可以在 JavaScript 中监听该事件并执行相应函数，比如创建一个具有动画效果的元素，当动画结束时弹出提示框或执行其他逻辑。

3、结合 CSS 类和 JavaScript 事件：先通过 CSS 类定义好不同的样式，然后在 JavaScript 中根据需要动态地为元素添加或移除这些类，从而改变元素的外观和行为，当鼠标移入某个元素时添加一个类使其变色，移出时移除该类恢复原样。

4、使用 MutationObserver：可以监视 DOM 节点的变化，当 CSS 类发生变化时执行 JavaScript 操作，比如观察某个元素的类属性变化，当其类名改变时触发相应的 JavaScript 函数。

5、利用 CSS 自定义属性（变量）：在 CSS 中定义自定义属性，然后在 JavaScript 中获取和修改这些属性的值，从而实现 CSS 样式的动态变化，定义一个表示背景颜色的自定义属性，在 JavaScript 中根据不同条件修改该属性的值，使页面的背景颜色随之改变。

6、动态创建样式表：通过 JavaScript 动态地创建和修改样式表，向其中添加规则来改变元素的样式，这种方法适用于需要在运行时生成大量样式的场景。

7、通过 JavaScript 控制类名：JavaScript 可以动态地添加、移除或切换元素的类名，从而改变元素的样式，比如根据用户的交互或页面的状态，实时更新元素的类名，以应用不同的 CSS 样式。

8、使用 CSS 表达式（expression）：IE5 及其以后版本支持在 CSS 中使用 expression，将 CSS 属性和 JavaScript 表达式关联起来，不过这种方式对浏览器资源要求较高，且存在兼容性问题，一般不建议使用。

9、CSS 跨站调用：在 CSS 中可以通过一些特殊的方式如在 URL 里添加 JavaScript 代码来执行，但这种方式存在安全风险，通常不推荐使用，仅作了解即可。

CSS 与 JavaScript 的交互是前端开发中实现动态效果和复杂功能的重要手段，开发者可以根据具体需求选择合适的方法来实现 CSS 与 JavaScript 的协同工作，从而创造出更加丰富和交互性更强的网页体验。