javascript加载CSS但保持当前样式

Question

我有以下在页面加载后运行的代码:

function prepare_bootstrap()
{
    console.log("Preparing bootstrap...");
    var items = document.body.getElementsByTagName("*");
    for (var i = items.length; i--;)
    {
        items[i].style.cssText = '!important';
    }


    var style1 = document.createElement("link");
    style1.rel = "stylesheet";
    style1.href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css";
    document.body.appendChild(style1);

    var style2 = document.createElement("link");
    style2.rel = "stylesheet";
    style2.href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css";
    document.body.appendChild(style2);

    var script = document.createElement("script");
    script.src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js";
    script.onload = script.onreadystatechange = function()
    {
        if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")
        {
            prepare_bootstrapdialog();
        }
    };
    document.body.appendChild(script);
}

我正在加载 Bootstrap 以允许格式良好的弹出窗口。但是， Bootstrap 几乎覆盖了所有内容，使页面看起来一团糟。我试着让每一种风格都很重要，但老实说，我不知道自己在做什么。

有没有办法让 css 不覆盖以前的 css？谢谢!

编辑:如前所述，不可能首先加载 Bootstrap ，因为 javascript 是书签的一部分。

Answer 1

读一读:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#A_scoped_stylesheet

虽然只适用于某些浏览器，因此不适用于面向公众的网站。真正做到这一点的最好方法是不要只包含整个 Bootstrap ，而是挑选出你需要的部分并直接使用它们。您可以在此处获取自定义构建的 Bootstrap :

http://getbootstrap.com/customize/

您真的不应该只加载您不经常使用的 css 样式。如果您遇到样式问题，这样做会为您带来更多的调试工作，并且还意味着您可能会浪费带宽。