在前端開發中，CSS是不可或缺的一部分，它可以用來為網頁設置樣式，并提供一種動態設置樣式的方式。與靜態設置樣式不同，動態設置樣式可以根據網頁交互的情況來改變元素的外觀。

/* 通過 JavaScript 設置樣式 */
var element = document.getElementById('example');
element.style.color = 'red';
element.style.backgroundColor = 'blue';
/* CSS類的動態添加和刪除 */
var element = document.getElementById('example');
element.classList.add('className');
element.classList.remove('className');
/* 使用偽類設置動態樣式 */
var element = document.getElementById('example');
element.addEventListener('click', function() {
this.classList.add('active');
});
element:hover {
color: red;
}

以上代碼演示了三種常見的CSS動態設置樣式的方法，分別是通過JavaScript直接設置樣式、CSS類的動態添加和刪除、使用偽類設置動態樣式。

通過JavaScript設置樣式可以直接針對元素的style屬性進行更改，這種方法比較靈活，但也容易出現代碼混亂的問題。

CSS類的動態添加和刪除則是通過對元素class屬性的操作來改變樣式。這種方法代碼更加整潔，易于維護，但不能直接改變屬性，需要在CSS中預先定義好相應的樣式。

使用偽類則可以根據元素的狀態來設置樣式，比如：hover、active、focus、visited等。這種方法使用起來比較簡單，但只能滿足一些簡單的動態效果。

動態設置樣式可以為網頁提供豐富的交互效果，讓用戶感受到更加生動的頁面體驗。我們可以根據實際需求選擇不同的動態設置樣式方法。