如何使用JavaScript动态更改级联样式表(CSS)

时间:2014-02-07 15:12:33

标签: javascript css cookies

我找到了一个可以使用Javascript http://www.thesitewizard.com/javascripts/change-style-sheets.shtml动态更改css的网站 喜欢它会有2个css,你可以点击其中一个并改变整个网站的设计。但我的问题是,例如我将其更改为备用css然后重新加载它将jsut更改回原始的CSS。我能做些什么才能让它像我选择的css一样?这是代码

这是javascript

function getCookie(cname)
 {
 var name = cname + "=";
 var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) 
  {
 var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
 return "";
}

// *** TO BE CUSTOMISED ***

 var style_cookie_name = "theme" ;
var style_cookie_duration = 30 ;

   // *** END OF CUSTOMISABLE SECTION ***

function switch_style ( css_title )
{
 // You may use this script on your site free of charge provided
 // you do not remove this notice or the URL below. Script from
// http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
  var i, link_tag ;
  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) {
      link_tag[i].disabled = true ;
      if (link_tag[i].title == css_title) {
        link_tag[i].disabled = false ;
      }
    }
    set_cookie( style_cookie_name, css_title,
      style_cookie_duration );
  }
 }
 function set_style_from_cookie()
 {
   var css_title = getCookie( style_cookie_name );
     alert(css_title);
  if (css_title.length) {
    switch_style( css_title );
  }
 }
  function set_cookie ( cookie_name, cookie_value,
    lifespan_in_days, valid_domain )
 {
     alert(cookie_value)
    // http://www.thesitewizard.com/javascripts/cookies.shtml
    var domain_string = valid_domain ?
                       ("; domain=" + valid_domain) : '' ;
    document.cookie = cookie_name +
                       "=" + encodeURIComponent( cookie_value ) +
                       "; max-age=" + 60 * 60 *
                      24 * lifespan_in_days +
                       "; path=/" + domain_string ;
    }
     function get_cookie ( cookie_name )
 {

     var cookie_string = document.cookie ;
              alert(cookie_string)
     var re = new RegExp("(^|;)[\s]*" + cookie_name + "=([^;]*)");             
     if (cookie_string.length != 0) {
         var cookie_value = cookie_string.match (re);
         alert(cookie_value)
     return decodeURIComponent ( cookie_value[2] ) ;
  }
    return '' ;
  }
 set_style_from_cookie()

CSS

   <link rel="stylesheet" type="text/css" title="blue"
   href="http://myanimesekai.com/css/newcss.css">
  <link rel="alternate stylesheet" type="text/css" title="pink"
   href="http://myanimesekai.com/css/css.css">

这是表格

<form>
<input type="submit"
  onclick="switch_style('blue');return false;"
  name="theme" value="Blue Theme" id="blue">
<input type="submit"
  onclick="switch_style('pink');return false;"
  name="theme" value="Pink Theme" id="pink">
</form>

它说我必须在设置的cookie部分

上放置正确的信息
 function set_cookie ( cookie_name, cookie_value,
lifespan_in_days, valid_domain )

所以我把它改成了

 function set_cookie ( "style", "theme",
7, "myanimesekai.com" )

但是发生的事情是它不起作用如果我改变它。有人能告诉我,请问如何解决这个问题?我想要的是,如果用户选择了一种风格,即使他/她重新加载页面或转到我网站的另一页,它也会保持不变

哦,顺便说一下,我已经包含了

 <body onload="set_style_from_cookie()">

部分但仍然无法正常工作

希望得到一些帮助,谢谢你和Godbless,抱歉我的语法不好

1 个答案:

答案 0 :(得分:0)

小提琴:http://jsfiddle.net/SALgL/ 你似乎改变了函数本身而不是“调用”函数。使用参数恢复set_cookie函数,只需更改顶部的变量:

var style_cookie_name = "theme" ;
var style_cookie_duration = 7 ;

get_cookie中使用的正则表达式格式错误且无法正常使用此功能:

function get_cookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) 
  {
  var c = ca[i].trim();
  if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
return "";
}