javascript - 在单页应用程序中切换样式表

Question

我们有一个使用 Angular 构建的单页应用程序，其中包含各种功能。

其中一个功能是代码片段的拖放界面。这些片段中的每一个都有自己的样式，这些样式的样式与管理面板的其余部分分开。

应用程序的主要部分使用 Bootstrap 主题设置样式，但拖放片段不是，因此当导航到拖放部分时，片段继承了一些 Bootstrap 样式。

这会导致各种样式问题，我正在寻找一种理想的解决方案，而无需使用 iframe 或不必覆盖 Bootstrap 样式。 理想情况下，我们会卸载 Bootstrap ，然后只加载新样式，或者让新内容不继承样式。

是否可以在不重新加载应用程序或使用 iframe 的情况下实现此目的？切换样式表或将新样式注入(inject)页面并删除其他样式？

Answer 1

我可以想到两种选择:

1. 移除样式表元素
   在显示有问题的内容之前，删除 LINK 元素(值得保留它作为以后的引用。

   var element = document.querySelector('link[href~="bootstrap.css"]'); 
   document.removeChild(element);
   

   当您想要返回 Bootstrap 样式时，您可以重新附加它。

   document.head.appendChild(bootstrapLinkElement);
   

2. 覆盖 Bootstrap CSS 规则
   创建一组覆盖和/或重置 Bootstrap 规则的规则。您可以将它们嵌套在父选择器下(例如 .no-bootstrap)，这样它们只会影响特定元素。
   为了让事情变得更简单，您可以获得 Bootstraps 预编译源代码(LESS 或 SASS)并对其进行编辑以合并覆盖样式表。

编辑:修复错字