使用javascript改變CSS style | Javascript
2024/01/01
2026/05/16
JavaScript 使開發人員能夠動態更改 HTML 元素和修改 CSS 樣式。
使用JavaScript更改CSS樣式:
- getElementById和style: 使用getElementById選擇元素，使用style屬性修改其樣式。
const myElement = document.getElementById('myElement');
myElement.style.color = 'blue';
- classList: 利用classList屬性動態添加或刪除CSS類。
const myElement = document.getElementById('myElement');
myElement.classList.add('highlight');
- 內聯樣式: 直接使用style屬性更改內聯樣式。
const myElement = document.getElementById('myElement');
myElement.style.backgroundColor = 'yellow';
示範代碼:
// 通過ID獲取元素
const myElement = document.getElementById('myElement');
// 動態更改文字顏色
myElement.style.color = 'green';
// 動態添加CSS類
myElement.classList.add('italic');
// 使用內聯樣式更改背景顏色
myElement.style.backgroundColor = 'lightgray';