要改變?cè)氐腃SS樣式，可通過(guò)修改style屬性或切換CSS類(lèi)來(lái)實(shí)現(xiàn)。 1. 修改style屬性可用element.style設(shè)置單個(gè)樣式，如myElement.style.color = 'red'; 多個(gè)樣式可用Object.assign批量設(shè)置，注意使用駝峰命名且為行內(nèi)樣式優(yōu)先級(jí)高。 2. 推薦使用classList添加、移除或切換CSS類(lèi)，如myElement.classList.add('highlight')，便於維護(hù)和復(fù)用。 3. 獲取當(dāng)前樣式需用window.getComputedStyle()讀取實(shí)際計(jì)算值，如console.log(styles.backgroundColor)，不能直接用element.style獲取外部樣式。

要改變一個(gè)元素的CSS 樣式，用JavaScript 是很直接的方法。你可以通過(guò)修改元素的style屬性或者切換CSS 類(lèi)的方式來(lái)實(shí)現(xiàn)。

1. 直接修改style 屬性

最簡(jiǎn)單的方式就是通過(guò)element.style來(lái)設(shè)置樣式。這種方式適合一次性修改某個(gè)特定樣式屬性。

 const myElement = document.getElementById('my-element');
myElement.style.color = 'red';
myElement.style.fontSize = '20px';

需要注意的是：

• 屬性名要用駝峰命名法（例如fontSize而不是font-size ）
• 修改後的樣式是行內(nèi)樣式，優(yōu)先級(jí)較高，可能會(huì)覆蓋外部CSS 文件中的規(guī)則

如果你需要一次改多個(gè)樣式，可以這樣寫(xiě)：

 Object.assign(myElement.style, {
  color: 'blue',
  fontSize: '24px',
  backgroundColor: '#f0f0f0'
});

2. 添加或移除CSS 類(lèi)

更推薦的做法是預(yù)先在CSS 中定義好類(lèi)樣式，然後通過(guò)JavaScript 來(lái)添加或移除這些類(lèi)。這樣更容易維護(hù)，也更符合關(guān)注點(diǎn)分離的原則。

比如你的CSS 可能是這樣的：

 .highlight {
  background-color: yellow;
  font-weight: bold;
}

然後用JS 切換這個(gè)類(lèi)：

 const myElement = document.getElementById('my-element');
myElement.classList.add('highlight'); // 添加類(lèi)myElement.classList.remove('highlight'); // 移除類(lèi)myElement.classList.toggle('highlight'); // 切換類(lèi)

這種方式的好處是：

• 易於統(tǒng)一管理樣式
• 不容易出錯(cuò)，特別是處理多個(gè)樣式時(shí)
• 更易讀、可複用性強(qiáng)

3. 獲取當(dāng)前樣式值

有時(shí)候你想讀取某個(gè)元素當(dāng)前的樣式值，這時(shí)候不能直接用element.style ，因?yàn)槟请b會(huì)返回行內(nèi)樣式的值。你應(yīng)該使用window.getComputedStyle() ：

 const myElement = document.getElementById('my-element');
const styles = window.getComputedStyle(myElement);
console.log(styles.backgroundColor); // 輸出背景顏色的實(shí)際計(jì)算值

這在你需要根據(jù)當(dāng)前樣式做判斷的時(shí)候特別有用。

基本上就這些。不復(fù)雜但容易忽略一些細(xì)節(jié)，比如屬性名格式和優(yōu)先級(jí)問(wèn)題。

以上是如何使用JavaScript更改元素的CSS？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！