单页应用程序中如何切换样式表

Question

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

其中之一是代码片段的拖放界面。每个片段都有自己的样式，与其他管理面板的样式分开。

应用程序的主要部分使用Bootstrap主题进行样式设置，但是拖放片段不是这样的，因此在进入拖放部分时，片段会继承一些Bootstrap样式。

这会导致多种样式问题，我们正在寻找解决方案，最好不使用iframes或覆盖Bootstrap样式。 理想情况下，我们将卸载Bootstrap，然后仅加载新样式，或者让新内容不继承样式。

是否有任何方法可以在不重新加载应用程序或使用iframe的情况下实现此目标？切换样式表或向页面注入新样式并删除其他样式？

- Guy

---

你可以尝试为加载样式表的链接标签添加一个ID，在加载到第二个页面时删除该链接标签，并注入自定义链接标签。这不会重新加载新的样式，通过在body上执行display：none和display：block来强制重绘。 - MIdhun Krishna

如果新添加的内容周围的元素存在依赖于原始样式表的样式，该怎么办？ - Dave Mackintosh

你可以在那个页面上引入新的样式表，放在 bootstrap 的样式表之后。这样就能覆盖 bootstrap 的样式，并使用你的新样式表来自定义拖放功能。 - Bioto

如果我们想要继承Bootstrap的样式，或者覆盖所有默认样式。Bootstrap有很多UI元素的基础样式，在拖放部分中我们没有覆盖它们。这些不是使用Bootstrap的样式，而主应用程序是，因此导致了问题。 - Guy

Answer 1

我可以想到两个选项：

1. Remove the stylesheet element
   Before displaying your problematic content, remove the LINK element (worth keeping it as a reference for later.

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

   When you want to return the Bootstrap styling you can just re-append it.

   document.head.appendChild(bootstrapLinkElement);
   

2. Override the Bootstrap CSS rules
   Create a set of rules that override and/or reset the Bootstrap rules. You can nest them under a parent selector (e.g. .no-bootstrap) so they will affect only specific elements.
   To make things easier you can get Bootstraps precompiled source code (LESS or SASS) and edit it to incorporate an override stylesheet.

编辑：修正了拼写错误

- Or Barmatz

---

如果我正确理解了#1，那么这个小工具显示它不起作用。http://jsfiddle.net/bheCw/2/ - Dave Mackintosh

不确定您在那个Fiddle中做了什么，但是通过单击任一按钮，我会得到不同颜色的正方形。 - Or Barmatz

这是一个小演示，通过删除样式表节点来切换样式表。 http://jsbin.com/lilic/2/embed - Or Barmatz

这不是我们想要做的。我们想在页面上放置一个带有附加样式表的元素，并且不希望其他页面样式的样式表影响该元素。 - Dave Mackintosh

在这种情况下，我建议采取第二步并覆盖任何不需要的规格。 - Or Barmatz

Answer 2

不太确定这是否是你问题的确切答案，但你可以尝试以下方法：

<link rel="stylesheet" ng-href="/{{snippet}}.css">

然后在你的控制器中：

$rootScope.snippet= 'xxx';

- mayank

---

ng-href会防止任何对{{snippet}}.css的调用，除非{{snippet}}被解析。 - mayank

Answer 3

我假设您正在使用Angular路由，因此可以设置它以具有路由相关的样式表。您可以自己实现，或者在页面头部包含以下内容：

<link rel="stylesheet" ng-href="{{css}}">

在每个路由的.when中，您将添加以下内容：

.when('/somepage, {
   templeteUrl: 'somepage.html',
   css: 'yourcss.css'
});

或者你可以研究一下angular-route-styles或这里，我相信它们都可以实现类似的功能，但是还可以向$routeProvider添加功能，并提供一种方法来将多个CSS部分添加到路由中。我认为这是一种更加Angular的方法，而且感觉这种功能应该包含在Angular基础中。

- Jared Reeves