document.writeでページを更新するには

Question

私は自分の選択に基づいてユーザーに異なるCSSを与えるために関数にdocument.writeを使用しています。

function blue() { 
    document.write('<link rel="stylesheet" type="text/css" href="http://ilam.irib.ir/documents/697970/237563314/blue.css" />'); 
} 

私はアンカータグから関数を呼び出しています。

function color2(){ 
    document.getElementById("navigation").innerHTML +='<a class="myButton" onclick="blue()" background-color:"#05c8f2";></a>'; 
} 

あなたが推測しているように、リンクをクリックするとページが消え、空白のページが表示されます。

この問題を解決する方法はありますか？私はページのリフレッシュを止めたくありません、私はただ問題を可能な限り解決しようとしています！

注：JavaScriptを使用してコードを追加している理由と、HTMLコードに直接コードを追加する理由を聞かないでください。このサイトは大規模なシステムであり、JavaScriptとCSSにアクセスできます。これでページを編集することができます。

Answer 1

document.writeは本文を書き換えます。結果として、ドキュメントに残っているのは、追加したCSSファイルだけなので、空白になります。上記のリンクから

View this

コード： -

var cssId = 'myCss'; // you could encode the css path itself to generate id.. 
if (!document.getElementById(cssId)) 
{ 
    var head = document.getElementsByTagName('head')[0]; 
    var link = document.createElement('link'); 
    link.id = cssId; 
    link.rel = 'stylesheet'; 
    link.type = 'text/css'; 
    link.href = 'http://website.com/css/stylesheet.css'; 
    link.media = 'all'; 
    head.appendChild(link); 
} 

代わりのDOMながら書き換え、私たちは「* headタグ