原生js怎么修改css

# 原生JS怎么修改CSS

在前端開發中，經常需要通過JavaScript動態修改元素的樣式。本文將詳細介紹如何使用原生JavaScript操作CSS，包括直接修改style屬性、操作classList、獲取計算樣式等方法。

## 一、直接修改元素的style屬性

最基礎的方式是通過DOM元素的`style`屬性直接修改內聯樣式：

```javascript
const element = document.getElementById('myElement');

// 修改單個樣式屬性
element.style.color = 'red'; 
element.style.fontSize = '20px';

// 批量修改樣式（不推薦直接賦值字符串）
element.style.cssText = 'color: blue; background: yellow;';

// 使用駝峰式屬性名
element.style.backgroundColor = '#f0f0f0';

注意事項： 1. 屬性名需要使用駝峰命名法（如backgroundColor） 2. 修改的是內聯樣式（優先級最高） 3. 會覆蓋元素原有的內聯樣式

二、操作classList修改類名

更推薦的方式是通過添加/移除CSS類來修改樣式：

const box = document.querySelector('.box');

// 添加類
box.classList.add('active');

// 移除類
box.classList.remove('old-class');

// 切換類（有則刪除，無則添加）
box.classList.toggle('highlight');

// 檢查是否包含某類
if (box.classList.contains('warning')) {
  // 處理邏輯
}

優點： - 實現樣式與行為的分離 - 可以批量修改多個樣式屬性 - 便于維護和復用

三、動態創建和插入樣式規則

需要全局修改樣式時，可以操作<style>標簽或CSSOM：

1. 創建style標簽插入

const style = document.createElement('style');
style.textContent = `
  .dynamic-class {
    border: 2px dashed green;
    transform: rotate(5deg);
  }
`;
document.head.appendChild(style);

2. 使用CSSStyleSheet API

// 獲取第一個樣式表
const sheet = document.styleSheets[0];

// 插入新規則（參數：規則內容，索引）
sheet.insertRule('.new-rule { padding: 10px; }', sheet.cssRules.length);

四、獲取計算樣式

要獲取元素最終生效的樣式（包括繼承樣式），需要使用getComputedStyle：

const element = document.getElementById('target');
const styles = window.getComputedStyle(element);

// 獲取具體屬性值
const fontSize = styles.getPropertyValue('font-size');
const color = styles.color;

console.log(`當前字體大?。?{fontSize}, 顏色：${color}`);

注意： - 返回的值是只讀的 - 返回的計算值可能帶單位（如”16px”） - 會包含瀏覽器默認樣式

五、CSS自定義屬性（變量）操作

現代CSS支持自定義屬性，JS也可以操作：

// 設置根元素的變量
document.documentElement.style.setProperty('--main-color', '#ff0000');

// 獲取變量值
const color = getComputedStyle(document.documentElement)
  .getPropertyValue('--main-color');

// 修改單個元素的變量
element.style.setProperty('--local-size', '100px');

六、性能優化建議

1. 減少重排： “`javascript // 不好的做法 - 多次觸發重排 element.style.width = ‘100px’; element.style.height = ‘200px’;

// 好的做法 - 使用cssText或class element.style.cssText = ‘width: 100px; height: 200px;’;

2. **使用requestAnimationFrame**：
   ```javascript
   function animate() {
     const element = document.getElementById('animated');
     let pos = 0;
     
     function frame() {
       if (pos < 300) {
         pos++;
         element.style.left = pos + 'px';
         requestAnimationFrame(frame);
       }
     }
     requestAnimationFrame(frame);
   }

七、兼容性處理

對于舊版瀏覽器，需要注意：

1. classList在IE10+支持，更早版本需用className： “`javascript // 代替classList.add element.className += ‘ new-class’;

// 代替classList.remove element.className = element.className.replace(/\bnew-class\b/g, “);

2. 前綴處理：
   ```javascript
   const transform = 'transform' in document.body.style 
     ? 'transform' 
     : 'webkitTransform';
   element.style[transform] = 'rotate(45deg)';

八、實際應用示例

1. 暗黑模式切換

function toggleDarkMode() {
  const root = document.documentElement;
  const isDark = root.classList.toggle('dark-mode');
  
  // 保存用戶偏好
  localStorage.setItem('darkMode', isDark);
}

// 初始化檢查
if (localStorage.getItem('darkMode') === 'true') {
  document.documentElement.classList.add('dark-mode');
}

2. 動態響應式布局

function adjustLayout() {
  const container = document.getElementById('container');
  if (window.innerWidth < 768) {
    container.classList.add('mobile-layout');
  } else {
    container.classList.remove('mobile-layout');
  }
}

// 監聽窗口變化
window.addEventListener('resize', adjustLayout);

總結

原生JS操作CSS的主要方法包括：

選擇合適的方法取決于具體需求，在性能敏感的場景下應注意減少重排和重繪?，F代前端開發中，雖然CSS-in-JS方案流行，但掌握原生JS操作CSS的能力仍然是基本功。

提示：在實際項目中，復雜的樣式管理建議使用CSS預處理器或CSS Modules，但理解底層原理對調試和性能優化很有幫助。 “`