クリックイベントで対象となるCSSファイルを変更するには

Question

clickイベントで対象のCSSファイルを変更するにはどうすればよいですか？つまり、私の見解ではメインのCSSファイルを1つ使用していますが、ボタンをクリックすると、別の完全な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>

それがお役に立てば幸いです。