如何使用JavaScript对CSS类动态添加或移除属性

可行性判断 #

你举例的my-css-class.addProperty("pointer-events: none")这种直接动态修改预定义CSS类属性的操作不可行，浏览器没有提供对应简易原生API，直接操作样式表修改类规则的方式存在兼容性、优先级混乱等问题，不建议使用。

推荐实现方案（适配TS+Less技术栈） #

最符合前端最佳实践的方案是通过状态控制CSS类名切换实现需求，实现步骤如下：

1. 先在Less中定义基础类和禁用状态类：

// 概览容器基础样式
.project-overview {
  /* 原有样式保留 */
  pointer-events: auto; // 默认允许交互

  // 禁用状态子类
  &.is-modify-disabled {
    pointer-events: none;
    // 可额外添加视觉提示样式，降低用户疑惑
    opacity: 0.7;
    cursor: not-allowed;
  }
}

2. TypeScript侧根据列表加载得到的状态，控制类名的添加/移除即可：

• 先定义全局状态存储权限标识：

// 存储列表加载阶段确定的禁用修改状态
let isModifyDisabled = false;

• 列表加载完成后更新状态：

function onProjectListLoadFinish(loadResult: { disableModify: boolean }) {
  isModifyDisabled = loadResult.disableModify;
}

• 打开项目概览时给容器加对应类：

function openProjectDetail(projectId: string) {
  const overviewEl = document.createElement('div');
  overviewEl.classList.add('project-overview');
  // 根据全局状态判断是否添加禁用类
  if (isModifyDisabled) {
    overviewEl.classList.add('is-modify-disabled');
  }
  // 后续挂载节点、加载详情逻辑
}

如果你的概览容器是提前渲染在页面中的非动态元素，直接在状态更新后修改类即可：

const overviewEl = document.querySelector('.project-overview') as HTMLElement;
if (isModifyDisabled) {
  overviewEl.classList.add('is-modify-disabled');
} else {
  overviewEl.classList.remove('is-modify-disabled');
}

不推荐的替代方案（仅做参考） #

如果一定要直接修改CSS类规则，可以操作浏览器的document.styleSheetsAPI实现，但存在跨域样式表访问报错、选择器匹配失效等隐患，代码示例如下：

for (const sheet of Array.from(document.styleSheets)) {
  try {
    for (const rule of Array.from(sheet.cssRules)) {
      if (rule instanceof CSSStyleRule && rule.selectorText === '.project-overview') {
        rule.style.pointerEvents = isModifyDisabled ? 'none' : 'auto';
        break;
      }
    }
  } catch (err) {
    // 跨域样式表会抛出访问异常，直接跳过即可
  }
}

内容的提问来源于stack exchange，提问作者Bibliophael