JavaScript - 修改 CSS

歡迎，初露頭角的編程者們！今天，我們將深入探索JavaScript的驚奇世界，學習如何動態地修改CSS。想像一下，能夠揮動魔杖，立即改變你的網頁外觀——這就是我們即將解鎖的力量！所以，拿起你的比喻中的魔杖（鍵盤），讓我們開始吧！

使用 JavaScript 修改 CSS

JavaScript 為我們提供了強大的工具來操縱 HTML 元素的 CSS。這種能力讓我們能夠創建有動態性、互動性的網頁，它們能夠响應用戶的操作或其他事件。

基础：訪問和修改 CSS 屬性

讓我們從基礎開始。要使用 JavaScript 修改 CSS，我們首先需要選擇我們想要修改的元素。我們可以使用如 getElementById()、querySelector() 或 getElementsByClassName() 的方法來做到這一點。

以下是一個簡單的例子：

// 選擇元素
let myElement = document.getElementById('myDiv');

// 改變它的背景顏色
myElement.style.backgroundColor = 'blue';

在這個例子中，我們選擇了一個 ID 為 'myDiv' 的元素，並將其背景顏色改為藍色。簡單吧？

但其實還有更多！我們可以一次性改變多個屬性：

let myElement = document.getElementById('myDiv');
myElement.style.backgroundColor = 'blue';
myElement.style.color = 'white';
myElement.style.padding = '10px';
myElement.style.borderRadius = '5px';

記住，當使用 JavaScript 來改變 CSS 時，我們使用駝峰式命名法（camelCase）來代替連字符命名法（kebab-case）。所以 background-color 變成了 backgroundColor。

改變類別

有時候，改變整個類別比單個屬性更有效率。JavaScript 也允許我們這樣做！

let myElement = document.getElementById('myDiv');

// 添加一個類別
myElement.classList.add('highlight');

// 移除一個類別
myElement.classList.remove('old-class');

// 切換一個類別（如果不存在則添加，如果存在則移除）
myElement.classList.toggle('active');

當你有一組預定義的樣式並希望動態地應用或移除時，這種方法特別有用。

當事件觸發時改變元素的樣式

現在，讓我們讓事情變得互動起來！我們可以響應如點擊、滑鼠悬停或鍵盤按鍵等事件來改變樣式。

點擊事件

以下是一個當按鈕被點擊時改變其顏色的例子：

let myButton = document.getElementById('myButton');

myButton.addEventListener('click', function() {
this.style.backgroundColor = 'red';
this.style.color = 'white';
});

每次按鈕被點擊時，它會變成紅色並帶有白色文字。神奇吧？

滑鼠悬停和滑鼠移出事件

讓我們創建一個有趣的悬停效果：

let myDiv = document.getElementById('myDiv');

myDiv.addEventListener('mouseover', function() {
this.style.transform = 'scale(1.1)';
this.style.transition = 'transform 0.3s';
});

myDiv.addEventListener('mouseout', function() {
this.style.transform = 'scale(1)';
});

現在，當你將滑鼠悬停在 div 上時，它會稍微增大，當你移開滑鼠時，它會恢復原始大小。就像 div 在呼吸一樣！

動態改變 HTML 元素的 CSS

有時候，我們需要根據某些條件或用戶輸入來改變樣式。這正是 JavaScript 在操縱 CSS 上的真正閃光點。

根據用戶輸入改變樣式

讓我們創建一個簡單的題目切換器：

let themeSelect = document.getElementById('themeSelect');
let body = document.body;

themeSelect.addEventListener('change', function() {
switch(this.value) {
case 'light':
body.style.backgroundColor = 'white';
body.style.color = 'black';
break;
case 'dark':
body.style.backgroundColor = 'black';
body.style.color = 'white';
break;
case 'blue':
body.style.backgroundColor = 'lightblue';
body.style.color = 'darkblue';
break;
}
});

這段代碼讓用戶能夠選擇一個題目，網頁的顏色會相應地改變。就像給你的用戶一枝網頁的畫筆！

動畫樣式改變

我們甚至可以創建有平滑過渡的樣式改變：

let growButton = document.getElementById('growButton');
let myDiv = document.getElementById('myDiv');

growButton.addEventListener('click', function() {
myDiv.style.transition = 'all 0.5s ease-in-out';
myDiv.style.width = (myDiv.offsetWidth + 50) + 'px';
myDiv.style.height = (myDiv.offsetHeight + 50) + 'px';
});

每次按鈕被點擊時，div 在每個維度上會增加 50 像素，並且有平滑的動畫。

使用 JavaScript 改變 CSS 的方法

以下是一個總結我們討論的主要方法的表格：

方法	描述	示例
直接樣式操縱	改變單個 CSS 屬性	element.style.property = 'value'
classList.add()	向元素添加 CSS 類別	element.classList.add('className')
classList.remove()	從元素中移除 CSS 類別	element.classList.remove('className')
classList.toggle()	在元素上切換 CSS 類別	element.classList.toggle('className')
setAttribute()	設置任何屬性，包括 'style'	element.setAttribute('style', 'property: value;')

記住，精通這些技巧的關鍵在於練習。嘗試實現這些例子，對它們進行實驗，很快你就能像專家一樣創建動態、互動的網頁！

總結來說，JavaScript 在操縱 CSS 上的能力為創建響應式、互動式的網頁體驗打開了世界大門。從簡單的顏色改變到複雜的動畫，力量在於你的手中。所以，勇往直前，進行實驗，讓你的創造力流淌！未來的網頁法師，快樂編程！

Credits: Image by storyset