javascript load css but keep current style

Question

I have the following code that is run after the page loads:

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);
}

I am loading bootstrap to allow for nicely formatted popups. However, the bootstrap overrides almost everything, making the page look messed up. I tried making every style important, but to be honest, I have no idea what I'm doing.

Is there any way to make css NOT override previous css? Thanks!

EDIT: As before stated, it is impossible to load bootstrap first as the javascript is part of a bookmarklet.

Try http://getbootstrap.com/customize/ and don't use `!important`!!! — mwl, Aug 30 '15 at 20:14

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

You should load the bootstrap stylesheet first, that way any stylesheets linked after that will override bootstrap's

(This is making use of the cascading part of CSS)

See https://stackoverflow.com/a/964343/4206206

edited May 23 '17 at 12:29

Community

1
1

answered Aug 30 '15 at 20:15

joe_young

4,107
2
27
38

Yes, but I can't. The javascript has to run after the page loads. (It's part of a bookmarklet) – R. Quam Aug 30 '15 at 20:17

score 0 · Accepted Answer · answered Aug 30 '15 at 20:18

Have a read of this:

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

Will only work in some browsers though, so not an option for an publicly facing site. The best way to do this really would be to not just include bootstrap in its entirety, instead picking out the bits you need and just using them. You can get custom builds of bootstrap here:

http://getbootstrap.com/customize/

You really shouldn't just load css styles that you aren't actively using. Doing so creates more debugging work for you if you encounter styling issues, and also means you're potentially wasting bandwidth.

javascript load css but keep current style

2 Answers2