javascript - 如何刷新document.write上的页面

我在函数中使用document.write根据用户的选择为用户提供不同的CSS。

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。这就是我们可以编辑页面的全部操作。

最佳答案

document.write重写body，结果文档中唯一剩下的就是您添加的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标签内附加link元素