jQuery: adding additional CSS files to current page

Question

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

Append it to your head:

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