Detailed explanation of js Dom to achieve skin change effect

This article mainly introduces the skin-changing effect of js Dom to everyone in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

The example in this article shares the specific code for Android Jiugongge picture display for your reference. The specific content is as follows

##

 
 
 
 
  



 

  季节
  换肤
 
 

 

header{
 position: absolute;
 top:0px;
 width:1366px;
 height: 60px;
 text-align: center;
}
header>span{
 line-height: 60px;
}
header>button{
 width:60px;
 height:45px;
 position: absolute;
 right:30px;
 margin-top:8px;
}
.main{
 margin-top: 60px;
 width:1366px;
 height:600px;
}

html,body{
 padding: 0px;
 margin: 0px;
}
header{
 background-color: #C0FF3E;
}
.main{
 background: url(img/spring.jpg) no-repeat;
 background-size: 1366px 600px;
}

html,body{
 padding: 0px;
 margin: 0px;
}
header{
 background-color: #76EE00;
}
.main{
 background: url(img/summer.jpg) no-repeat;
 background-size: 1366px 600px;
}

function change(){
 var link=document.getElementsByTagName("link")[1];
 var btn=document.getElementsByTagName("button")[0];
 btn.onclick=function(){
  if(link.href=="http://localhost:8000/BOM%E5%AD%A6%E4%B9%A0/spring.css"){
   link.href="summer.css";
  }else{
   link.href="spring.css";
  }
 };
}
window.onload=function(){
 change();
};

Detailed example of jQuery implementing the skin-changing function based on cookies

jQuery+jQuery.cookie.js plug-in to implement the skin-changing function sample code

How to achieve web page skin change effect

The above is the detailed content of Detailed explanation of js Dom to achieve skin change effect. For more information, please follow other related articles on the PHP Chinese website!