js同时改变多个csss属性

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

// 同时改变多个CSS属性
element.style.backgroundColor = 'blue';
element.style.color = 'white';
element.style.padding = '10px';

/* 定义CSS类 */
.active-style {
  background-color: blue;
  color: white;
  padding: 10px;
}

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

// 添加CSS类来应用多个样式
element.classList.add('active-style');

/* 定义CSS变量 */
:root {
  --bg-color: blue;
  --text-color: white;
  --padding: 10px;
}

.myElement {
  background-color: var(--bg-color);
  color: var(--text-color);
  padding: var(--padding);
}

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

// 改变CSS变量来应用多个样式
document.documentElement.style.setProperty('--bg-color', 'green');
document.documentElement.style.setProperty('--text-color', 'yellow');
document.documentElement.style.setProperty('--padding', '20px');