jQuery: adding additional CSS files to current page

Question

Hi, i have a website that uses screen.css as main CSS file. I added this for monitors with a 1024+ resolution.

$(document).ready(function(){
if(screen.width > 1024) {
    $('link').attr('href','hi-res.css');
}
});

The problem is that hi-res.css is replacing screen.css... i don't want to replace it, i just want to load an additional css in that case. Any ideas? Thanks.

Answer 1

Try this.. instead of replacing append one.

$('head').append($('<link>').attr('href','hi-res.css')); 

Answer 2

Append it to your head:

$("head").append("<link id='yournewcss' href='hi-res.css' type='text/css' rel='stylesheet' />");

Answer 3

You want to .append :o)

$(document).ready(function(){
    if(screen.width > 1024) {
       $('head').append('<link href='hi-res.css' type='text/css' rel='stylesheet' />')
    }
 });

Answer 4

You might want to check out the following link:

http://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript