Change the order of CSS inside of head tag with Javascript

Question

I have CSS order like this:

<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style1.css">

What I want to achieve is order like this:

<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">

The ideal would be if this can be done when page loads.

Doing this in JS is too late in the page lifecycle for it to have any effect. The only way you can achieve what you need is to amend the HTML source. Is there a reason you can;t? — Rory McCrossan, May 05 '20 at 09:58

score 2 · Accepted Answer · answered May 07 '20 at 15:01

I don't see why you need to have to do it with JavaScript, but here's the answer:

$("LINK[rel='stylesheet']")

you can use this jquery code in order to get the all the link tags for stylesheets. Using array manipulation, you could change the order. More info about this specific snippet here

then once you are ready, you could loop over the code. More info about this from here

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

obviously, change what you are appending.

Change the order of CSS inside of head tag with Javascript

1 Answers1