JavaScript操作DOM样式的各种方法小结

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

// 设置单个样式属性
element.style.color = 'blue';
element.style.backgroundColor = '#f0f0f0';

// 使用驼峰式命名代替CSS中的连字符
element.style.fontSize = '16px';
element.style.marginTop = '10px';

// 使用cssText
element.style.cssText = 'color: red; background: yellow; font-size: 14px;';

// 使用setAttribute
element.setAttribute('style', 'color: red; background: yellow;');

// 只能获取通过style属性设置的内联样式
console.log(element.style.color); // 如果颜色不是内联样式，则返回空字符串

const computedStyle = window.getComputedStyle(element);

console.log(computedStyle.color); // 获取计算后的颜色值
console.log(computedStyle.getPropertyValue('color')); // 另一种获取方式

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

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

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

// 切换类（存在则移除，不存在则添加）
element.classList.toggle('active');

// 检查是否包含某个类
if (element.classList.contains('active')) {
  // do something
}

// 替换类
element.classList.replace('old-class', 'new-class');

/* CSS中定义 */
:root {
  --main-color: #4CAF50;
  --default-padding: 15px;
}

// 获取根元素
const root = document.documentElement;

// 获取变量值
const mainColor = getComputedStyle(root).getPropertyValue('--main-color');

// 设置变量值
root.style.setProperty('--main-color', '#3e8e41');

// 在特定元素上设置
element.style.setProperty('--local-size', '20px');

// 不好：多次触发重排
element.style.width = '100px';
element.style.height = '200px';
element.style.margin = '10px';

// 好：使用cssText或classList一次性修改
element.style.cssText = 'width: 100px; height: 200px; margin: 10px;';

function animate() {
  // 样式变更
  element.style.left = `${parseInt(element.style.left) + 1}px`;
  
  if (parseInt(element.style.left) < 200) {
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? '#4CAF50' : 'white'};
  color: ${props => props.primary ? 'white' : '#4CAF50'};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid #4CAF50;
  border-radius: 3px;
`;

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

import styles from './Button.module.css';

function Button() {
  return <button className={styles.primary}>点击我</button>;
}

// 正确获取元素尺寸的方式
const width = element.offsetWidth; // 包括边框
const height = element.offsetHeight;

// 或使用getBoundingClientRect()
const rect = element.getBoundingClientRect();
console.log(rect.width, rect.height);