在网页开发中，CSS（层叠样式表）负责页面的外观和布局，而JavaScript（JS）则负责页面的交互和动态效果。这两者虽然各自独立，但在实际应用中却经常需要相互配合。本文将深入探讨JavaScript如何与CSS亲密接触，实现样式的动态调用，让页面焕然一新。
一、CSS的调用方法
在了解JavaScript如何调用CSS之前，我们先来回顾一下CSS的基本调用方法：
链接外部样式表
：
通过在HTML文档的
部分使用 标签来链接外部样式表。这是最常见的CSS调用方法，代码示例如下：
内嵌样式表
：
将CSS代码直接放在HTML文档的
部分，并用
使用style属性
：
直接在HTML标签上使用
style
属性来定义样式。这种方法简单易用，但局限性较大，不利于样式的复用。
使用css
二、JavaScript调用CSS样式
JavaScript提供了多种方式来调用CSS样式，以下是几种常见的方法：
修改元素的
style
属性
：
通过元素的
style
属性直接修改其内联样式。例如，设置元素的外边距和文字颜色：
const element = document.getElementById('myElement');
element.style.margin = '10px';
element.style.color = 'red';
需要注意的是，JavaScript属性与CSS属性在命名上非常接近，但JavaScript中属性名不能包含破折号（-），因此，像
font-size
这样的CSS属性名，在JavaScript中需要转换成驼峰命名法（camelCase），也就是
fontSize
。
改变元素的
class
或
id
：
通过修改元素的
class
或
id
属性来切换不同的CSS样式。例如，切换一个元素的背景颜色：
const element = document.getElementById('myElement');
element.className = 'new-class';
向文档中写入新的CSS指令
：
使用JavaScript动态创建