今天来介绍一下如何使用JavaScript来控制CSS样式。

首先，获取和修改元素的样式可以使用获取元素的style属性。

// 获取元素
var element = document.getElementById('test');
// 获取样式
var style = element.style;
// 修改样式
style.color = 'red';
style.fontSize = '24px';

上述代码中，获取元素的方式可以使用getElementById()、getElementsByTagName()等方法。

其次，也可以使用CSSStyleDeclaration对象进行样式的获取和修改。

// 获取元素
var element = document.getElementById('test');
// 获取样式
var style = window.getComputedStyle(element);
// 获取样式属性值
var color = style.color;
var fontSize = style.fontSize;
// 修改样式属性值
element.style.color = 'red';
element.style.fontSize = '24px';

使用CSSStyleDeclaration对象，可以更方便地获取和修改元素的样式。

接下来，我们来看一下使用JavaScript控制动态样式的例子。

var button = document.getElementById('button');
// 添加鼠标滑过事件
button.addEventListener('mouseover', function() {
this.style.background = 'red';
});
// 添加鼠标离开事件
button.addEventListener('mouseout', function() {
this.style.background = '';
});

上述代码中，我们通过addEventListener方法为按钮添加了鼠标滑过和离开事件，并在事件处理函数中修改了按钮的背景颜色。

除了修改样式属性，JavaScript还可以通过添加或删除class来控制元素的样式。

var element = document.getElementById('test');
// 添加class
element.classList.add('new-class');
// 删除class
element.classList.remove('old-class');

上述代码中，我们使用classList对象的add()和remove()方法来添加和删除class。

最后，我们来看一下如何使用样式表对象（StyleSheet对象）控制样式。

var styleSheet = document.styleSheets[0];
// 添加规则
styleSheet.insertRule('#test {color: red;}', 0);
// 删除规则
styleSheet.deleteRule(0);

上述代码中，我们通过document.styleSheets获取文档中的样式表对象，然后使用insertRule()和deleteRule()方法来添加和删除样式规则。

综上所述，JavaScript可以通过多种方式来控制CSS样式，灵活应用可以带来很多非常有趣的效果，希望能对你有所帮助！