jquery: replace the link to style.css to game.css?

Question

Trying to replace the conents of a whole page ( works ) + also replace the link to a style.css to game.css, with query

$.get('/games/14', function(data){  var $page = $(data);
    $('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
    //$('#layout').empty().append($page);
    $('body').empty().append($page);
})

I seem to be unable to change the "style.css" to "game.css" no matter what I try, wich Jquery Guru knows how to accomplish this? thx !

UPDATE: tried the suggestions below still have issues, this is what I'm using now ( no replacement of the .css file )

  $.get('/games/14', function(data){
$("link[href='style.css']").attr({href: 'game.css'});
var $page = $(data);
$('body').empty().append($page);
})

Cody Bonney · Accepted Answer · 2012-07-16 23:15:59Z

2

Here ya go, just tested this out and it worked.

<!DOCTYPE HTML>
<html>
<head>
    <script src="jquery-1.7.2.min.js"></script>
    <link href="/assets/frontend.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
    <script>
        $("link[href='/assets/frontend.css']").attr('href', '/assets/game.css');
    </script>
</body>
</html>

To anwer your comment below, I tested it using Firebug. Using the Console tab, I can see that it first attempted to load up assets/frontend.css, ran the JS, then attempted to load up assets/game.css.

loading

I then checked the DOM in the HTML tab of firebug, and saw that the link elements href attribute was updated.

enter image description here

edited Jul 16, 2012 at 23:15

answered Jul 16, 2012 at 22:58

Cody Bonney

1,6581 gold badge10 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rubytastic Over a year ago

also doesn't work for me how did you test it? I've i save this as .html it still shows the frontend.css when try to load page, view source .

Edd Morgan Over a year ago

Clicking 'view source' in a browser will not show you the current state of the page's DOM. It will show you the document first pulled from the server. I.e., the original file, without any changes you've made using JavaScript. I suggest using something like the Chrome/Safari Web Inspector or Firebug for Firefox.

Cody Bonney Over a year ago

Edd Morgan is correct. Simply viewing source will not show you anything that has updated since the initial loading of the DOM. I've updated answer with an explanation of how I tested it for ya.

Rubytastic Over a year ago

I checked it with firebug also, it seems to working indeed, thx for the complete writeup. I assumed the html would in reality be changed and rewritten but this seems not the case, although ineed it tries to load the game.css wich would answer the question competletly. Im not that of a query coder myself thx for helping out getting this fixed.

Casey Foster · Accepted Answer · 2012-07-16 22:24:41Z

1

Target the link element with href attribute 'style.css' and replace the href attribute of that element with 'game.css':

$("link[href='style.css']").attr({href: 'game.css'});

answered Jul 16, 2012 at 22:24

Casey Foster

6,0402 gold badges29 silver badges27 bronze badges

1 Comment

Rubytastic Over a year ago

Ok I tried these myself to no avail, I'm trying to replace this <link href="/assets/frontend.css" media="screen" rel="stylesheet" type="text/css" /> with "/assets/game.css" any idea?

Edd Morgan · Accepted Answer · 2012-07-16 22:25:41Z

1

You can use jQuery's attr() function to change the href.

$("link[href=style.css]").attr('href', 'game.css');

There's probably a more rock-solid selector you'll want to use, but that'll do it.

answered Jul 16, 2012 at 22:25

Edd Morgan

2,92320 silver badges22 bronze badges

1 Comment

Edd Morgan Over a year ago

The syntax above is correct. Make sure the "style.css" in the jQuery selector matches the link's href that you are trying to replace -- and that the "game.css" in the attr() call matches the address to the stylesheet you're trying to change it to. Also, make sure the original link element actually exists. In your question edit, it seems you've removed the call you used to insert the link element in the first place.

Oleg · Accepted Answer · 2012-07-16 23:08:14Z

1

href attribute substitution as suggested in other answers is inconsistently handled by different browsers (i.e. may not trigger re-flow/re-render). Instead, the original style element has to be removed and a new element with the desired href has to be inserted in its place. An intuitive way to do so with jQuery:

$('link[href$="style.css"]').replaceWith('<link href="game.css" ... ></link>');

answered Jul 16, 2012 at 23:08

Oleg

25.1k8 gold badges64 silver badges94 bronze badges

2 Comments

Cody Bonney Over a year ago

Which browsers is it inconsistently handled by? I just tested it out in IE7, IE8, IE9, FF, Safari, and Chrome. It worked as expected in all of them.

Oleg Over a year ago

@CodyBonney: hearsay, but I always worked under the assumption that IE7&8 will mess this up; like described here: stackoverflow.com/q/3007669/1081234

Collectives™ on Stack Overflow

jquery: replace the link to style.css to game.css?

4 Answers 4

4 Comments

1 Comment

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related