Angular 4中如何修改DOM元素的CSS类

目标效果对比

修改前：<a class="nav-link active" href="#">
修改后：<a class="nav-link" href="#">

原生JS无依赖方案 #

• 核心优势：不需要引入第三方库，利用浏览器原生classListAPI操作类名，避免字符串匹配的bug
• 实现代码：

// 精准匹配同时带nav-link和active类的a标签，避免误操作其他元素
const targetLinks = document.querySelectorAll('a.nav-link.active');
targetLinks.forEach(link => {
  // 精准移除active类，不会误伤带active子串的其他类名
  link.classList.remove('active');
})

• 注意事项：执行脚本时要确保对应DOM已经渲染完成，动态渲染的导航可以在元素挂载完成的回调里执行这段逻辑。

老项目jQuery兼容方案 #

• 适合仍在使用jQuery的存量项目，代码量更精简
• 实现代码：

$('a.nav-link.active').removeClass('active');

• 避坑提醒：不要直接用字符串替换的方式修改class属性，比如className.replace('active', '')这类写法，容易误替换类名中包含active子串的内容，还会残留多余空格。

样式层覆盖方案（无需修改DOM） #

• 如果只是需要消除active类带来的视觉样式差异，不需要改动DOM结构，可以直接写CSS规则覆盖：

/* 对应用到的样式框架调整，这里以Bootstrap导航为例 */
a.nav-link.active {
  /* 重置active的专属样式为普通nav-link的默认样式即可 */
}

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