up vote 3 down vote favorite
2

Good day!

I want to add and remove CSS files according to the size of the list. My code is as follow:

$("#size_storedList").ready(function(){
    var list_size = $("#size_storedList").attr('value');
    if(list_size <= 4){
        if ($("link").is('.size5')){
            $('link.size5').removeClass();
        }
        if ($("link").is('.size6')){
            $('link.size6').removeClass();
        }
        $('head').append('<link class="size4" rel="stylesheet" href="css/stored_list/list_size4.css" type="text/css" />');
    } else if(list_size == 5){
        if ($("link").is('.size4')){
            $('link.size4').removeClass();
        }
        if ($("link").is('.size6')){
            $('link.size6').removeClass();
        }
        $('head').append('<link class="size5" rel="stylesheet" href="css/stored_list/list_size5.css" type="text/css" />');
    } else if(list_size == 6){
        if ($("link").is('.size4')){
            $('link.size4').removeClass();
        }
        if ($("link").is('.siz5')){
            $('link.size5').removeClass();
        }
        $('head').append('<link class="size6" rel="stylesheet" href="css/stored_list/list_size6.css" type="text/css" />');
    }
});

But it is kind of messy. What can i do to minimize the checking if the file already exists or not so that i can remove it

if ($("link").is('.size5')){
            $('link.size5').removeClass();
}

Thank you.

share|improve this question

2 Answers

up vote 5 down vote accepted 
<link rel="stylesheet" href="default.css" type="text/css">

<ul>
  <li><a id="css-red" href="#red">Red</a></li>
  <li><a id="css-blue" href="#blue">Blue</a></li>
  <li><a id="css-green" href="#green">Green</a></li>
</ul>

$(document).ready(function() {
  // red
  $("#css-red").click(function() {
    $("link[rel=stylesheet]").attr({href : "red.css"});
  });
});

Above concept is different from you, but I think this will be a good idea. You can customize same to your current code.

share|improve this answer
1  
very nice technique – Trace Jan 16 '12 at 19:57
+1, Very nice! If you have multiple stylesheets you can use $("link[rel=stylesheet]")[index] if you know the order, or, you can use $("link[rel=stylesheet]").each to peruse them. – AresAvatar Aug 7 '12 at 21:54
up vote 1 down vote

You could use data-* attributes on the body tag and save in, let's say data-loaded-css, the url of the currently active css file.

also see $.data()

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.