How can I change the targeted CSS file on a click event

Question

How can I change th targeted CSS file on a click event with angular for example. What I mean is that my view is using one main CSS file, but on a click on a button, I am showing a new view which I want it to have another complete CSS. On the hiding of this last div and the showing of the old one, I want the old one to continue targeting the first CSS file which he is associated with.

Answer 1

you can target the css dynamically, like this:

<link rel="stylesheet" href="{{cssFilePath}}"> 

and when the user clicks - update this cssFilePath with the value of the desirable file path.

<button ng-click="updateCssFilePath()">Change</button>

Answer 2

You can change the CSS file with JS. Look at this example. It won't work here, but it should work when implemented.

var cssnum = 1;

function changeCSS() {
if (cssnum == 1) {
document.getElementById("cssid").innerHTML = "<link rel='stylesheet' href='2.css'>";
var cssnum =2;
}


else { 
document.getElementById("css").innerHTML = "<link rel="stylesheet" type="text/css" href="1.css">";
var cssnum =1;
}

}

<div id="cssid">
<link rel="stylesheet" href="1.css">
</div>

<a href="#" onclick="changeCSS()">Change CSS File (link)</a>
<br><br>
<button onclick="changeCSS()">Change CSS File (button)</button>

Hope it helps.