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

// 設(shè)置單個樣式屬性
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屬性設(shè)置的內(nèi)聯(lián)樣式
console.log(element.style.color); // 如果顏色不是內(nèi)聯(lián)樣式，則返回空字符串

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');

// 設(shè)置變量值
root.style.setProperty('--main-color', '#3e8e41');

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

// 不好：多次觸發(fā)重排
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);