js中设置css样式

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

// 设置单个样式
element.style.backgroundColor = 'blue';

// 设置多个样式
element.style.color = 'white';
element.style.padding = '10px';

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

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

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

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

// 设置样式
element.setAttribute('style', 'background-color: blue; color: white; padding: 10px;');

// 获取样式
const currentStyle = element.getAttribute('style');
console.log(currentStyle);

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

#myElement {
  background-color: var(--primary-color);
}

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