DOM样式操作

DOM样式操作是前端开发中不可或缺的一部分，通过JavaScript动态修改元素的样式可以实现丰富的交互效果。无论是直接修改内联样式，还是操作CSS类，都能灵活控制页面元素的视觉表现。

内联样式操作

通过element.style属性可以直接访问或修改元素的内联样式。这种方式适用于需要动态计算样式值的场景，比如根据用户输入实时调整元素大小或颜色。

const box = document.getElementById('myBox');
box.style.width = '200px';
box.style.backgroundColor = '#f0f0f0';
box.style.border = '1px solid #ccc';

修改样式属性时需要注意：

1. CSS属性名使用驼峰命名法（如backgroundColor对应CSS的background-color）
2. 尺寸值必须包含单位（如px、%等）
3. 颜色值可以是十六进制、RGB或颜色名称

批量设置样式时，可以使用cssText属性：

box.style.cssText = 'width: 200px; height: 150px; background-color: blue;';

类样式操作

通过classListAPI可以更高效地管理元素的CSS类，相比直接操作className属性，它提供了更丰富的方法：

const element = document.querySelector('.item');

// 添加类
element.classList.add('active', 'highlight');

// 移除类
element.classList.remove('inactive');

// 切换类
element.classList.toggle('visible');

// 检查类是否存在
if (element.classList.contains('special')) {
  // 执行操作
}

计算样式获取

要获取元素最终应用的样式（包括继承样式和外部样式表中的样式），需要使用getComputedStyle方法：

const style = window.getComputedStyle(document.getElementById('myElement'));
console.log(style.getPropertyValue('font-size'));
console.log(style.backgroundColor);

注意：

• 返回的值是只读的
• 颜色值通常转换为RGB格式
• 尺寸值会转换为像素单位

样式表操作

JavaScript也可以直接操作CSS样式表，实现更全局的样式控制：

// 获取第一个样式表
const sheet = document.styleSheets[0];

// 添加新规则
sheet.insertRule('body { background-color: #f5f5f5; }', 0);

// 删除规则
sheet.deleteRule(0);

对于更复杂的操作，可以动态创建<style>元素：

const style = document.createElement('style');
style.textContent = `
  .dynamic-class {
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
`;
document.head.appendChild(style);

动画与过渡控制

通过JavaScript可以精确控制CSS动画和过渡：

const animBox = document.getElementById('animate-box');

// 触发CSS动画
animBox.style.animation = 'slide 2s ease-in-out';

// 监听动画事件
animBox.addEventListener('animationend', () => {
  console.log('动画结束');
});

// 动态修改过渡属性
animBox.style.transition = 'transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)';

响应式样式调整

结合窗口大小变化事件，可以实现响应式的样式调整：

function adjustLayout() {
  const container = document.getElementById('main-container');
  if (window.innerWidth < 768) {
    container.style.flexDirection = 'column';
    container.style.padding = '10px';
  } else {
    container.style.flexDirection = 'row';
    container.style.padding = '20px';
  }
}

window.addEventListener('resize', adjustLayout);
adjustLayout(); // 初始调用

性能优化建议

频繁操作DOM样式会影响页面性能，以下是一些优化技巧：

1. 批量修改样式时，可以先使元素脱离文档流：

const element = document.getElementById('heavy-element');
element.style.display = 'none';

// 执行多次样式修改
element.style.width = '300px';
element.style.height = '200px';
// ...其他修改

element.style.display = 'block';

2. 使用requestAnimationFrame进行动画相关的样式修改：

function animate() {
  const element = document.getElementById('animated-element');
  let pos = 0;
  
  function frame() {
    if (pos < 300) {
      pos++;
      element.style.left = pos + 'px';
      requestAnimationFrame(frame);
    }
  }
  
  requestAnimationFrame(frame);
}

3. 对于复杂的动画，优先考虑CSS动画而非JavaScript控制的样式变化

浏览器兼容性处理

不同浏览器可能需要不同的样式属性前缀，可以通过特征检测来处理：

function setTransform(element, value) {
  const prefixes = ['', 'webkit', 'moz', 'ms', 'o'];
  prefixes.forEach(prefix => {
    const property = prefix ? `${prefix}Transform` : 'transform';
    element.style[property] = value;
  });
}

const box = document.getElementById('transform-box');
setTransform(box, 'rotate(45deg)');

伪元素样式修改

虽然不能直接通过JavaScript修改伪元素的样式，但可以通过修改CSS变量或添加样式规则来实现：

// 通过CSS变量
document.documentElement.style.setProperty('--after-content', '"动态内容"');

// 或者添加样式规则
const style = document.createElement('style');
style.textContent = `
  .target-element::after {
    content: "新内容";
    color: red;
  }
`;
document.head.appendChild(style);

样式操作的实际应用

1. 实现主题切换功能：

function setTheme(theme) {
  document.documentElement.style.setProperty('--primary-color', theme.primary);
  document.documentElement.style.setProperty('--secondary-color', theme.secondary);
  document.documentElement.style.setProperty('--text-color', theme.text);
}

const darkTheme = {
  primary: '#2c3e50',
  secondary: '#34495e',
  text: '#ecf0f1'
};

setTheme(darkTheme);

2. 创建动态进度条：

function updateProgress(percent) {
  const progressBar = document.getElementById('progress-bar');
  progressBar.style.width = `${percent}%`;
  progressBar.setAttribute('aria-valuenow', percent);
  
  // 根据进度改变颜色
  if (percent > 70) {
    progressBar.style.backgroundColor = '#4CAF50';
  } else if (percent > 30) {
    progressBar.style.backgroundColor = '#FFC107';
  } else {
    progressBar.style.backgroundColor = '#F44336';
  }
}

3. 实现元素的拖拽功能：

const draggable = document.getElementById('draggable');
let isDragging = false;
let offsetX, offsetY;

draggable.addEventListener('mousedown', (e) => {
  isDragging = true;
  offsetX = e.clientX - draggable.getBoundingClientRect().left;
  offsetY = e.clientY - draggable.getBoundingClientRect().top;
  draggable.style.cursor = 'grabbing';
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  
  draggable.style.left = `${e.clientX - offsetX}px`;
  draggable.style.top = `${e.clientY - offsetY}px`;
  draggable.style.position = 'absolute'; // 确保定位方式正确
});

document.addEventListener('mouseup', () => {
  isDragging = false;
  draggable.style.cursor = 'grab';
});

现代CSS-in-JS方案

虽然原生DOM样式操作很强大，但在大型项目中，可以考虑使用CSS-in-JS方案：

// 使用styled-components的示例语法
const Button = styled.button`
  background: ${props => props.primary ? '#4CAF50' : '#f0f0f0'};
  color: ${props => props.primary ? 'white' : '#333'};
  padding: 0.5em 1em;
  border: none;
  border-radius: 3px;
  font-size: 1em;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
`;

// 使用
<Button primary>主要按钮</Button>

样式操作与可访问性

修改样式时需要考虑可访问性，确保视觉变化不会影响用户体验：

// 高对比度模式检测
const isHighContrast = window.matchMedia('(prefers-contrast: high)').matches;

if (isHighContrast) {
  document.body.style.color = '#000';
  document.body.style.backgroundColor = '#fff';
}

// 减少动画设置
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

if (prefersReducedMotion) {
  const animatedElements = document.querySelectorAll('[data-animate]');
  animatedElements.forEach(el => {
    el.style.animation = 'none';
    el.style.transition = 'none';
  });
}