Home > Article > Web Front-end > Detailed explanation of js Dom to achieve skin change effect

Detailed explanation of js Dom to achieve skin change effect

小云云Original: 2018-01-04 13:11:541351browse

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>

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

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

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

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

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!

spring jquery css Cookie JS 对象 dom href android

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of JavaScript creative clock projectNext article：Detailed explanation of JavaScript creative clock project

See more

Detailed explanation of js Dom to achieve skin change effect

Related articles