javascript如何操作CSS_如何动态修改样式

推荐用 classlist 切换预设 css 类：提前定义类（如 .btn--loading），再用 add/toggle/remove 安全操作；直接改 style 只影响内联样式且不支持 !important 和响应式；动态样式应使用 insertrule；伪元素样式需通过 css 变量或切换类实现。

直接改 element.style 是最常用但有局限的方式

绝大多数场景下，想快速改某个元素的单个样式（比如把文字颜色变红），直接操作 style 属性就行：

const btn = document.getElementById('my-btn');
btn.style.color = 'red';
btn.style.backgroundColor = '#eee';
btn.style.borderRadius = '4px';

用 classList 切换预设 CSS 类更健壮

真正推荐的做法是提前在 CSS 里定义好类，再用 JS 控制增删。这样样式逻辑和行为逻辑分离，可维护性强，也天然支持动画、媒体查询和伪类：

.btn--loading {
  opacity: 0.6;
  pointer-events: none;
}
.btn--success {
  background-color: #4caf50;
  color: white;
}

const btn = document.getElementById('my-btn');
btn.classList.add('btn--loading');
// 或同时增删多个
btn.classList.toggle('btn--success');
btn.classList.remove('btn--loading');

动态插入 CSS 规则要用 insertRule，别用 innerHTML 写 <style></style>

需要运行时生成整套样式（比如主题色切换、暗黑模式适配），应该操作 CSSStyleSheet 对象，而不是拼接字符串塞进 <style></style> 标签：

const style = document.createElement('style');
document.head.appendChild(style);
const sheet = style.sheet;
sheet.insertRule('.theme-dark { background: #121212; color: #fff; }', 0);
sheet.insertRule('.theme-dark button { border-color: #333; }', 1);

修改伪元素样式只能靠 CSS 变量或强制重绘

::before、::after 这些伪元素不能直接用 element.style 设置，因为它们不是真实 DOM 节点。可行方案有两个：

银色网新企业网站管理系统8.1

网新企业网站管理系统是专业为个人和企业网站建设而开发的一款智能化程序。该程序基于ASP+ACCESS环境开发，拥有完善的网站前台和后台全智能化管理功能，完全由后台操作（如添加、修改网站基本信息、产品、企业新闻动态等）静态生成前台界面HTML格式网页文件，是个人和企业智能化网站建设首选！

下载

• 在 CSS 中预先定义变量，JS 修改根变量值：

  :root {
    --icon-color: #333;
  }
  .my-icon::before {
    color: var(--icon-color);
  }

  document.documentElement.style.setProperty('--icon-color', 'blue');

• 临时切换类触发重绘（较重）：

  .my-icon.highlight::before {
    content: '★';
    color: orange;
  }

  el.classList.add('highlight');