Javascript 实际工作的引导/引导样例样式表转换器

我正在尝试为引导/引导样例构建尽可能简单的动态CSS样式表转换器。我看过很多资料，但我发现大多数示例都依赖于

link

标记的附加

title

属性。因此，它不能在所有浏览器中工作或工作错误（主要是因为）

我还注意到，使用

title

或

rel=“alternate stylesheet”

并不是一个完美的主意，因为虽然以这种方式列出的样式在初始页面加载时会被“忽略”（而不是呈现），但它们会以某种方式被解析，这使得浏览器速度慢得令人难以置信。我在默认引导样式表旁边添加了两到三个引导样例样式，我几乎杀死了我的Chrome浏览器，尽管页面只使用默认样式呈现

---

有没有人可以展示一个动态样式表转换器的例子或者

title

和

rel=“alternate stylesheet”

属性的正确用例，它们不会消耗我所有的计算机资源？

我想看看twitter引导项目，依我之见，他们的代码写得非常干净，而且应该与所有浏览器兼容

你应该看看这一页

简单到使用

title

属性声明“默认”样式表：

<link href="assets/bootstrap/bootstrap.min.css" rel="stylesheet" media="screen" title="main">

工作起来很有魅力

---

如果整个页面中只有一个样式表，则可以省略将

title

属性添加到

link

标记，并使用简单的

$（'link'）

选择器而不是

$（'link[title=“main”]'）

来“捕获”它。因为我还包括了其他样式表（

bootstrap responsive.min.css

），所以必须引用带有

title

属性的“可变”样式表。

OP已经在使用bootstrap了。你为什么要告诉他们一些他们已经知道的事情？

<link href="assets/bootstrap/bootstrap.min.css" rel="stylesheet" media="screen" title="main">

<ul class="dropdown-menu">

  <li><a href="#" class="change-style-menu-item" rel="assets/bootstrap/bootstrap.min.css"><i class="icon-fixed-width icon-pencil"></i> bootstrap.min.css (Default)</a></li>

  <li><a href="#" class="change-style-menu-item" rel="assets/bootstrap/bootstrap.cyborg.min.css"><i class="icon-fixed-width icon-pencil"></i> bootstrap.cyborg.min.css (Cyborg)</a></li>

</ul>

<script type="text/javascript">
/*<![CDATA[*/
    jQuery(function($)
    {
        $('body').on('click', '.change-style-menu-item', function()
        {
            $('link[title="main"]').attr('href', $(this).attr('rel'));
        });
    });
/*]]>*/
</script>