Page 1 of 1

Using JavaScript to assign a CSS file...

Posted: Mon Oct 19, 2009 11:08 pm
by Wolf_22
I currently use the unobtrusive JavaScript approach at handling dynamic placement or assignment of CSS classes to markup elements. This approach is found over on the A List Apart website.

What I have found (as far as my personal website is concerned) is that this won't cut it. I need the classes that the JavaScript creates to be used as conditional modifiers, where once triggered or tripped in the proceeding IF clauses, it will enact a corresponding CSS file for the given monitor resolution.

So in other words, I would like something like the following:

Code: Select all

window.onload = function(){setScreenClass();};window.onresize = setScreenClass;
 
function setScreenClass(){
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
    var w_class = (w<=240)?'w_240':(w>240&&w<=320)?'w_320':(w>320&&w<=640)?'w_640':(w>640&&w<=800)?'w_800':(w>800&&w<=1024)?'w_1024':(w>1024&&w<=1152)?'w_1152':(w>1152&&w<=1280)?'w_1280':'w_1600';
    var h_class = (h<=600)?'h_600':(h>600 && h<=768)?'h_768':(h>768 && h<=800)?'h_800':(h>800 && h<=1024)?'h_1024':(h>1024 && h<=1280)?'h_1280':'h_1600';
 
    if(w_class = 'w_1024'){
        document.getElementById('css').href = 'w_1024.css';
    }elseif(w_class = 'w_1152'){
        document.getElementById('css').href = 'w_1024.css';
        }etc...
};
It's not working, however, and I was wondering if someone could explain to me why this is... Is it because it can't assign CSS files in the way I'm trying or is there simply something wrong with my syntax?

Re: Using JavaScript to assign a CSS file...

Posted: Tue Oct 20, 2009 10:33 am
by pickle
I'm not sure the <link> tag can have an id. Usually when I see a script change the linked stylesheet, it adds and removes <link> tags, kind of like:

Code: Select all

$('head').append('<link rel = "stylesheet" type = "text/css" href = "1024.css" />);