本文目錄導讀：

1. 使用JavaScript
2. 使用CSS變量
3. 使用媒體查詢
4. 使用動畫和過渡

動態(tài)改變CSS的幾種方法

使用JavaScript

JavaScript是一種強大的腳本語言，可以用來動態(tài)改變CSS，通過JavaScript，我們可以獲取元素的樣式，并對其進行修改，以下是一個簡單的例子：

// 獲取元素
var element = document.getElementById('myElement');
// 獲取樣式
var style = element.style;
// 修改樣式
style.color = 'red';
style.fontSize = '20px';

使用CSS變量

CSS變量是一種新的技術，可以用來動態(tài)改變CSS，通過定義變量，我們可以在整個文檔中重復使用這些變量，并且可以在需要的地方對其進行修改，以下是一個簡單的例子：

:root {
  --main-color: blue;
  --font-size: 16px;
}
body {
  color: var(--main-color);
  font-size: var(--font-size);
}

在JavaScript中，我們可以這樣修改變量：

document.documentElement.style.setProperty('--main-color', 'red');
document.documentElement.style.setProperty('--font-size', '20px');

使用媒體查詢

媒體查詢是一種響應式設計的工具，可以用來根據(jù)設備的不同特性（如寬度、高度、顏色等）來動態(tài)改變CSS，以下是一個簡單的例子：

@media (max-width: 600px) {
  body {
    font-size: 18px;
  }
}

在這個例子中，如果設備的寬度小于或等于600像素，那么body元素的字體大小就會變?yōu)?8像素。

使用動畫和過渡

CSS的動畫和過渡功能可以用來動態(tài)改變元素的樣式，通過定義關鍵幀和過渡效果，我們可以實現(xiàn)一些非常有趣的效果，以下是一個簡單的例子：

@keyframes myAnimation {
  0% { color: blue; }
  50% { color: green; }
  100% { color: red; }
}
div {
  animation: myAnimation 2s infinite;
}

在這個例子中，div元素的顏色會在2秒內從藍色變?yōu)榧t色，然后不斷重復。