使用javascript改變CSS style | Javascript

JavaScript 使開發人員能夠動態更改 HTML 元素和修改 CSS 樣式。

使用JavaScript更改CSS樣式:

  1. getElementById和style: 使用getElementById選擇元素，使用style屬性修改其樣式。
const myElement = document.getElementById('myElement');
myElement.style.color = 'blue';
  1. classList: 利用classList屬性動態添加或刪除CSS類。
const myElement = document.getElementById('myElement');
myElement.classList.add('highlight');
  1. 內聯樣式: 直接使用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';