如何使用JavaScript移除已加载的CSS文件以解决样式覆盖冲突？

HTML页面引入的外部CSS都是通过<link rel="stylesheet">标签挂载到DOM中的，只要将对应标签从DOM树删除，浏览器就会自动卸载该样式表的所有规则，解决样式覆盖问题。

代码实现 #

方式1：精确匹配CSS完整路径 #

如果明确知道要移除的CSS文件的完整href路径，用精准匹配的方式避免误删：

// 将引号内的内容替换为目标CSS的完整href路径
const targetCssPath = '/styles/conflicting-style.css';
const targetLink = document.querySelector(`link[rel="stylesheet"][href="${targetCssPath}"]`);
if (targetLink) {
  targetLink.remove();
}

方式2：按文件名模糊匹配 #

如果不知道完整路径，只知道CSS文件名，用遍历匹配的方式：

// 将引号内的内容替换为要删除的CSS文件名
const targetCssName = 'conflicting-style.css';
document.querySelectorAll('link[rel="stylesheet"]').forEach(linkEl => {
  if (linkEl.href.includes(targetCssName)) {
    linkEl.remove();
  }
});

注意事项 #

• 移除CSS标签后，已经渲染完成的元素已应用的样式不会自动清除，需要触发页面重绘才能生效，可执行一行简单代码触发重绘：document.body.style.display = 'none'; document.body.offsetHeight; document.body.style.display = '';
• 如果你要移除的CSS是后续动态插入到页面的，需要保证你的移除代码执行时机晚于该CSS的插入时机，否则会找不到目标标签
• 该方案是临时处理手段，更稳妥的长期方案是给不同业务模块的样式加专属前缀命名空间，从根源避免样式冲突

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