Question

我有一个javascript函数，可以从影响我网站的两个不同的css文件切换。问题是css只是部分应用了我的功能，我需要刷新浏览器以获得整个新风格。

这是我的功能：

function switch_style ()
{
    var head=document.getElementsByTagName('head')[0];

    for (i = 0, link_tag = document.getElementsByTagName("link"); i < link_tag.length ; i++ ) 
    {
            if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) && link_tag[i].title) 
            {
                if (link_tag[i].title == "normal")
                {
                    head.removeChild(link_tag[i]);          
                }
            }
    }
    var cssNode = document.createElement('link');
    cssNode.type = 'text/css';
    cssNode.rel = 'stylesheet';
    cssNode.href = '/templates/rhuk_milkyway/css/template_contrast.css';
    head.appendChild(cssNode);
    set_cookie( style_cookie_name, "contrast", style_cookie_duration ); 
}

如您所见，我删除然后在页眉中添加新样式。

有没有办法刷新样式？

（它适用于所有浏览器）

Answer 1

CSS

<link href="/css/main.css" rel="stylesheet"type="text/css" title="main" media="screen" />
<link href="/css/alt1.css" rel="alternate stylesheet" type="text/css" title="alt1" media="screen" />

Javascript

function switch_style (title) {
   var lnks = document.getElementsByTagName('link');
   for (var i = lnks.length - 1; i >= 0; i--) {
   if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
      lnks[i].disabled = true;
      if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false;
    }}}

Answer 2

我可能会忽略某些内容，但为什么只需在html或body元素中添加新课程时就需要切换样式表？

优点：

切换速度更快。你不必等到你的新css 已加载 - 替代样式可包含在原始样式中样式表。
简单。 jQuery.toggleClass（或element.className，如果你不使用jQuery）将完成所有工作。
无处不在。

CON（S'）：

您必须将新类添加到css中的所有选择器。

如何在css切换后刷新页面的样式

2 个答案: