DOM样式操作

DOM样式操作是前端开发中不可或缺的一部分，通过JavaScript动态修改元素的样式可以实现丰富的交互效果。从基础的样式属性修改到复杂的动画控制，DOM样式操作提供了多种方式满足不同场景的需求。

内联样式操作

通过元素的style属性可以直接读写内联样式。这种方式修改的样式优先级最高，会覆盖外部样式表和内部样式表中的规则。

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

// 设置单个样式
element.style.color = 'red';

// 设置多个样式
element.style.cssText = 'background: blue; font-size: 20px;';

// 获取样式值
const currentColor = element.style.color;

需要注意的是，CSS属性名在JavaScript中需要使用驼峰命名法：

element.style.backgroundColor = '#f0f0f0';  // 对应CSS的background-color
element.style.zIndex = '10';  // 对应CSS的z-index

类名操作

通过修改元素的classList属性可以更高效地管理多个样式类。

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

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

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

// 切换类
box.classList.toggle('hidden');

// 检查类是否存在
if (box.classList.contains('active')) {
  console.log('元素处于激活状态');
}

计算样式获取

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

const element = document.getElementById('myElement');
const computedStyle = window.getComputedStyle(element);

// 获取计算后的样式值
const marginTop = computedStyle.marginTop;
const fontSize = computedStyle.fontSize;

console.log(`元素字体大小: ${fontSize}, 上边距: ${marginTop}`);

样式表操作

JavaScript也可以直接操作CSS样式表，实现更全局的样式修改。

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

// 添加新规则
styleSheet.insertRule('.new-class { color: green; }', styleSheet.cssRules.length);

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

// 修改现有规则
if (styleSheet.cssRules[0].selectorText === '.old-class') {
  styleSheet.cssRules[0].style.backgroundColor = 'yellow';
}

动画样式控制

结合CSS变量和JavaScript可以实现更灵活的动画控制：

:root {
  --rotate-degree: 0deg;
}

.spinner {
  transform: rotate(var(--rotate-degree));
  transition: transform 0.5s ease;
}

const spinner = document.querySelector('.spinner');
let degree = 0;

function animate() {
  degree += 10;
  document.documentElement.style.setProperty('--rotate-degree', `${degree}deg`);
  requestAnimationFrame(animate);
}

animate();

性能优化建议

频繁操作DOM样式会导致重排和重绘，影响性能。以下是一些优化技巧：

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

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

// 批量修改样式
element.style.width = '100px';
element.style.height = '200px';
element.style.backgroundColor = 'red';

element.style.display = 'block';

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

function animate() {
  const element = document.getElementById('animated-element');
  let position = 0;
  
  function step() {
    position += 1;
    element.style.left = `${position}px`;
    
    if (position < 100) {
      requestAnimationFrame(step);
    }
  }
  
  requestAnimationFrame(step);
}

3. 对于复杂动画，考虑使用CSS动画或变换（transform）代替直接修改位置属性：

// 不推荐
element.style.left = `${x}px`;
element.style.top = `${y}px`;

// 推荐
element.style.transform = `translate(${x}px, ${y}px)`;

响应式样式调整

根据浏览器条件动态调整样式：

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

// 初始调整
adjustLayout();

// 窗口大小变化时重新调整
window.addEventListener('resize', adjustLayout);

伪元素样式修改

虽然不能直接通过JavaScript访问伪元素，但可以通过CSS变量间接控制：

.tooltip::after {
  content: var(--tooltip-content);
  background-color: var(--tooltip-bg, #333);
  color: var(--tooltip-color, white);
}

const tooltip = document.querySelector('.tooltip');
tooltip.style.setProperty('--tooltip-content', '"这是动态提示"');
tooltip.style.setProperty('--tooltip-bg', 'red');

样式操作的实际应用

实现一个可拖拽的模态框：

<div class="modal" id="myModal">
  <div class="modal-header" id="modalHeader">标题</div>
  <div class="modal-content">内容...</div>
</div>

const modal = document.getElementById('myModal');
const header = document.getElementById('modalHeader');
let isDragging = false;
let offsetX, offsetY;

header.addEventListener('mousedown', (e) => {
  isDragging = true;
  const rect = modal.getBoundingClientRect();
  offsetX = e.clientX - rect.left;
  offsetY = e.clientY - rect.top;
  
  modal.style.position = 'absolute';
  modal.style.cursor = 'grabbing';
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  
  modal.style.left = `${e.clientX - offsetX}px`;
  modal.style.top = `${e.clientY - offsetY}px`;
});

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

浏览器兼容性处理

不同浏览器可能需要不同的样式属性前缀：

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('animated-box');
setTransform(box, 'rotate(45deg)');

样式操作与框架结合

在现代前端框架中，DOM样式操作通常通过框架提供的机制完成，但理解底层原理仍然重要。

React中的样式操作示例：

function ColoredBox() {
  const [color, setColor] = useState('red');
  
  return (
    <div 
      style={{
        width: '100px',
        height: '100px',
        backgroundColor: color,
        transition: 'background-color 0.3s'
      }}
      onClick={() => setColor(color === 'red' ? 'blue' : 'red')}
    />
  );
}

Vue中的样式操作示例：

<template>
  <div 
    :style="{
      width: size + 'px',
      height: size + 'px',
      backgroundColor: active ? 'green' : 'gray'
    }"
    @click="toggle"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      size: 100,
      active: false
    }
  },
  methods: {
    toggle() {
      this.active = !this.active;
      this.size += 10;
    }
  }
}
</script>