Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erklärung von js Dom, um einen Hautveränderungseffekt zu erzielen

小云云
Freigeben: 2018-01-04 13:11:54
Original
1342 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die hautverändernde Wirkung von js Dom vor. Er hat einen gewissen Referenzwert. Ich hoffe, er kann jedem helfen.

Das Beispiel in diesem Artikel teilt den spezifischen Code für die Android-Neun-Quadrat-Bildanzeige als Referenz. Der spezifische Inhalt ist wie folgt


<!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>
Nach dem Login kopieren

Grundlegende Stildatei


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;
}
Nach dem Login kopieren

spring.css-Datei


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

summer.css-Datei


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

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();
};
Nach dem Login kopieren

ruft hauptsächlich das Link-Tag-Objekt ab und ersetzt das Attribut href in Link

Verwandte Empfehlungen:

Detailliertes Beispiel für jQuery, das die Skin-Change-Funktion basierend auf Cookies implementiert

jQuery+jQuery.cookie.js Beispielcode für Plug-in zur Implementierung der Skin-Änderungsfunktion

So erzielen Sie den Skin-Änderungseffekt einer Webseite

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung von js Dom, um einen Hautveränderungseffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!