CSS 是前端開發中不可缺少的一部分，它用于控制網頁的外觀和布局。通常在HTML 文件中通過<link> 標簽引入CSS文件，或者使用<style> 標簽定義CSS樣式。但有時候我們需要在運行時動態添加 CSS 屬性值，這就需要使用 JavaScript 來實現。

//獲取目標元素
const element = document.getElementById('target');
//設置CSS屬性值
element.style.color = 'blue';
element.style.fontSize = '16px';

以上代碼使用 document.getElementById() 獲取指定 ID 的 DOM 元素，然后使用 .style 屬性設置 CSS 屬性值。類似的，我們可以使用 .classList 屬性來動態添加或刪除 CSS 類名。

//獲取目標元素
const element = document.getElementById('target');
//添加CSS類名
element.classList.add('selected');
//刪除CSS類名
element.classList.remove('selected');

以上代碼使用 .classList.add() 和 .classList.remove() 方法分別添加和刪除CSS類名，這里的 CSS 類名可以是預定義的，也可以是我們自己定義的。

在實際開發中，動態添加 CSS 屬性值可以幫助我們實現很多有趣的效果，比如當鼠標懸停在一個元素上時改變其背景顏色。在這種情況下，我們可以使用事件監聽器和 .style 屬性來實現。

//獲取目標元素
const element = document.getElementById('target');
//添加事件監聽器
element.addEventListener('mouseover', () =>{
element.style.backgroundColor = 'yellow';
});
//添加事件監聽器
element.addEventListener('mouseout', () =>{
element.style.backgroundColor = '';
});

以上代碼在鼠標懸停在目標元素上方時，設置其背景顏色為黃色，并在鼠標移開時設置回默認背景顏色。這里的事件監聽器可以使用常見的 DOM 事件，比如 click、mousemove、scroll 等。

總之，通過動態添加 CSS 屬性值和 CSS 類名，我們可以實現更靈活、更有趣的網頁效果，為用戶提供好看、易用的交互體驗。