原生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的主要方法包括：

选择合适的方法取决于具体需求，在性能敏感的场景下应注意减少重排和重绘。现代前端开发中，虽然CSS-in-JS方案流行，但掌握原生JS操作CSS的能力仍然是基本功。

提示：在实际项目中，复杂的样式管理建议使用CSS预处理器或CSS Modules，但理解底层原理对调试和性能优化很有帮助。 “`