Detailed explanation of js Dom to achieve skin change effect-JS Tutorial-php.cn

Detailed explanation of js Dom to achieve skin change effect

小云云

Release： 2018-01-04 13:11:54

Original

1341 people have browsed it

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>换肤</title>
 <link rel="stylesheet" href="base.css">
 <link rel="stylesheet" href="spring.css">
 <script src="change.js"></script> 
</head>
<body>
 <header>
  <span>季节</span>
  <button>换肤</button>
 </header>
 <p class="main">
 </p>
</body>
</html>

Copy after login

Basic style file

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;
}

Copy after login

spring.css file

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

Copy after login

summer.css file

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

Copy after login

change,js file

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();
};

Copy after login

Mainly to obtain the link tag object and replace the attribute href in the link

Related recommendations:

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!