如何在單擊事件中更改目標 CSS 文件

Question

例如，如何在點擊事件中更改目標文件 CSS angular。 我的意思是我的視圖正在使用一個主要的 CSS 文件，但是在單擊按鈕時，我正在顯示一個新視圖，我希望它有另一個完整的 CSS。關於隱藏最后一個 div 和顯示舊的，我希望舊的繼續定位與他關聯的第一個 CSS 文件。

Answer 1

您可以動態定位CSS，如下所示：

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

當用戶單擊時-用所需文件路徑的值更新此cssFilePath 。

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

Answer 2

您可以使用JS更改CSS文件。 看這個例子。 它在這里不起作用，但是在實施時應該起作用。

 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> 

希望能幫助到你。

Answer 3

好吧，這個問題已經有 5 年歷史了，所以我真的希望你已經得到了答案......

無論如何，上周我遇到了同樣的問題，經過幾天的疲憊，得到了我的答案/解決方案。

這里是：

如何使用 Angular 動態加載 CSS