要改變?cè)氐腃SS樣式，可通過修改style屬性或切換CSS類來實(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類，如myElement.classList.add('highlight')，便于維護(hù)和復(fù)用。3. 獲取當(dāng)前樣式需用window.getComputedStyle()讀取實(shí)際計(jì)算值，如console.log(styles.backgroundColor)，不能直接用element.style獲取外部樣式。

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

1. 直接修改 style 屬性

最簡(jiǎn)單的方式就是通過 element.style 來設(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è)樣式，可以這樣寫：

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

2. 添加或移除 CSS 類

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

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

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

然后用 JS 切換這個(gè)類：

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

這種方式的好處是：

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

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

有時(shí)候你想讀取某個(gè)元素當(dāng)前的樣式值，這時(shí)候不能直接用 element.style，因?yàn)槟侵粫?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í)問題。

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