动态改变css链接实现样式的切换

最新推荐文章于 2023-11-21 08:52:38 发布

mengjiaoyao

最新推荐文章于 2023-11-21 08:52:38 发布

阅读量200

点赞数

分类专栏： javascript 文章标签： CSS JavaScript HTML ViewUI

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

test页面

<html>
<head>
<link href="1/1.css" rel="stylesheet" type="text/css" id="setSkin" />
<style>
  .s_current {background:red;}
</style>
<script language="javascript">
var skin={
   _skinRef:document.getElementById("setSkin"),
   _ctrls:document.getElementsByTagName("span"),
   _srcs:["0/0.css",
      "1/1.css",
      "2/2.css",
      "3/3.css",
      "4/4.css",
      "5/5.css"],
   _cookieName:"NTES_SKIN",
   setCookie:function(cookieName,cookieValue){
     var today = new Date();
     var expires = new Date();
     expires.setTime(today.getTime() + 1000 * 60 * 60 * 24 * 365);
     document.cookie = cookieName + "=" + escape(cookieValue) + "; expires=" + expires.toGMTString();
   },
   save:function(i){
     this.setCookie(this._cookieName,i);
   },
   change:function(i){
     var t=this,pos=i;
     if(pos>=0&&pos<t._srcs.length){
       t._skinRef.href=t._srcs[pos];
       for(var m = 0;m<this._ctrls.length;m++)
       {
          this._ctrls[m].style.background = (m==pos ? "red":"#FFFFFF");
       }
       t.save(pos);
     }
   },
   getCookie:function(Name){
     var search = Name + "=";
     if (document.cookie.length > 0) {
       offset = document.cookie.indexOf(search);
       if (offset != -1) {
       offset += search.length;
       end = document.cookie.indexOf(";", offset);
       if (end == -1) {
        end = document.cookie.length;
       }
       return unescape(document.cookie.substring(offset, end));
       }
       else
       {
       return ("");
       }
      }
      else {
       return ("");
      }
    },
   init:function(){
     var t=this,pos=parseInt(this.getCookie(t._cookieName));
     if(!isNaN(pos)){t.change(pos);}
     for(var index=0;index< t._ctrls.length;index++){
      (function(x){
       t.addEvent(t._ctrls[x],'click', function(e){
        t.change(x);
       });
      })(index);
     }

   },
   addEvent:function( obj, type, fn ) {
     if(obj.addEventListener)
     {
       obj.addEventListener(type,fn,false);
     }
     else if(obj.attachEvent){
      obj["e"+type+fn]=fn;
      obj[type+fn]=function(){obj["e"+type+fn](window.event);}
      obj.attachEvent("on"+type,obj[type+fn]);
     }
   }
   };
</script>
</head>
<body>
  <div class="skinBar" id="changeSkin">
        <span class="s_yellow" title="黄色主题">黄色主题</span>
        <span class="s_blue" title="蓝色主题">蓝色主题</span>
        <span class="s_gray" title="灰色主题">灰色主题</span>
        <span class="s_coffee" title="咖啡色主题">咖啡色主题</span>
        <span class="s_green" title="绿色主题">绿色主题</span>
        <span class="s_pink" title="粉色主题">粉色主题</span>
    </div>
    <div id="colorChange">这里边颜色会变化</div>
    <div id="imgChange"></div>
    <div id="login"></login>
    <a href="">aaaaaaaaaaaaaaaa</a>
    <a href="">bbbbbbbbbbbbbbbb</a>
    <a href="">cccccccccccccccc</a>
    <a href="">dddddddddddddddd</a>
    <a href="">eeeeeeeeeeeeeeee</a>
</body>
</html>
<script>
   skin.init();
</script>

样式文件夹1

一个样式文件1.css

#colorChange {
background-color:red;
}
#imgChange {
border: 1px solid red;
background-image:url(img/a.png);
width:200px;height:100px;
}
body{
font-size : 13px;
}

a{
color:#006600;
}
a:hover{
color:green;
text-decoration: none;
}

mengjiaoyao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态改变css链接实现样式的切换

test页面&lt;html&gt;&lt;head&gt;&lt;link href="1/1.css" rel="stylesheet" type="text/css" id="setSkin" /&gt;&lt;style&gt; .s_current {background:red;} &lt;/style&gt;
复制链接

扫一扫