今天來介紹一下如何使用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控制動態(tài)樣式的例子。

var button = document.getElementById('button');
// 添加鼠標滑過事件
button.addEventListener('mouseover', function() {
this.style.background = 'red';
});
// 添加鼠標離開事件
button.addEventListener('mouseout', function() {
this.style.background = '';
});

上述代碼中，我們通過addEventListener方法為按鈕添加了鼠標滑過和離開事件，并在事件處理函數(shù)中修改了按鈕的背景顏色。

除了修改樣式屬性，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];
// 添加規(guī)則
styleSheet.insertRule('#test {color: red;}', 0);
// 刪除規(guī)則
styleSheet.deleteRule(0);

上述代碼中，我們通過document.styleSheets獲取文檔中的樣式表對象，然后使用insertRule()和deleteRule()方法來添加和刪除樣式規(guī)則。

綜上所述，JavaScript可以通過多種方式來控制CSS樣式，靈活應(yīng)用可以帶來很多非常有趣的效果，希望能對你有所幫助！