在js中修改css样式表

// 获取元素
const element = document.getElementById('myElement');

// 修改样式
element.style.color = 'red';
element.style.fontSize = '20px';

// 获取元素
const element = document.getElementById('myElement');

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

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

// 创建一个新的 <style> 元素
const style = document.createElement('style');
document.head.appendChild(style);

// 添加新的 CSS 规则
style.sheet.insertRule('body { background-color: yellow; }', style.sheet.cssRules.length);

/* 在CSS中定义变量 */
:root {
  --primary-color: blue;
}

/* 使用变量 */
body {
  background-color: var(--primary-color);
}

// 修改CSS变量
document.documentElement.style.setProperty('--primary-color', 'green');

window.onload = function() {
  const element = document.getElementById('myElement');
  element.style.color = 'red';
};

function changeColor() {
  const element = document.getElementById('myElement');
  element.style.color = getRandomColor();
  requestAnimationFrame(changeColor);
}

requestAnimationFrame(changeColor);