Load different css file depending on URL using jquery or something else

Question

is it possible to introduce id specific styles or load different css files depending on the "url" you are at?

something like this:

<script>
 if(location.href == 'http://jpftest2.tumblr.com/about'){ 
document.write('<style type='text/css'>
.social {
  display:none;
}

</style>'); 
} 

</script>

so when a user goes away from the root url to the "/about" page. i want to introduce the style:

   .social {
  display:none;
}

would be better if it was also possible to load a different CSS file altogether depending on the URL?

the different pages on tumblr share the same head so i can't introduce a different css on different pages

azz · Accepted Answer · 2012-10-31 05:26:06Z

2

Assuming your site is using something like AJAX (correct?), (otherwise you would put the style-sheets in the HTML <head> of the file), you could something like:

window.onpopstate = function() {
    if(window.location.path == '/about'){ 
        var css = document.createElement('style');
        css.type = 'text/css';
        css.rel = 'stylesheet';
        css.innerHTML = '.social{display:none;}';
        document.getElementsByTagName('head')[0].appendChild(css);
    }
}

However I wouldn't recommend it.

edited Oct 31, 2012 at 5:26

answered Oct 31, 2012 at 5:20

azz

5,9703 gold badges33 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

felipeclopes · Accepted Answer · 2012-10-31 05:25:54Z

1

You may use the following approach

<script type="text/javascript">
    $(document).ready(function(){

    if(your_url_condition){
            //for IE compatibility
            if (document.createStyleSheet){
                document.createStyleSheet('style.css');
            }
            else {
                $("head").append($("<link rel='stylesheet' href='style.css' type='text/css' media='screen' />"));
            }
        }
    });
</script>

This will work and may help you.

Regards!

answered Oct 31, 2012 at 5:25

felipeclopes

4,0802 gold badges27 silver badges36 bronze badges

3 Comments

felipeclopes Over a year ago

Sure, the post is tagget with jQuery.

user1696812 Over a year ago

@felipeclopes hey felipe, i was wondering what do i replace "(your_url_condition) with? something like "location.href == 'jpftest2.tumblr.com/about'" ?

felipeclopes Over a year ago

Yes, you should replace with a browser url comparisson. Or maybe a switch case.

Collectives™ on Stack Overflow

Load different css file depending on URL using jquery or something else

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related