CODEWITHSUNDEEP
jquerycss
Andres SK
Andres SK

Reputation: 10982

jQuery: adding additional CSS files to current page

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.

Upvotes: 11

Views: 20110

Answers (4)

James O'Sullivan
James O'Sullivan

Reputation: 508

You might want to check out the following link:

How to load up CSS files using Javascript?

Upvotes: 0

HurnsMobile
HurnsMobile

Reputation: 4391

You want to .append :o)

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

Upvotes: 2

Gert Grenander
Gert Grenander

Reputation: 17104

Append it to your head:

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

Upvotes: 27

Teja Kantamneni
Teja Kantamneni

Reputation: 17482

Try this.. instead of replacing append one.

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

Upvotes: 1

Related Questions