Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée de js Dom pour obtenir un effet de changement de peau

小云云
Libérer: 2018-01-04 13:11:54
original
1348 Les gens l'ont consulté

Cet article présente principalement en détail l'effet de changement de peau de js Dom. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

L'exemple de cet article partage le code spécifique pour l'affichage d'images à neuf carrés Android pour votre référence. Le contenu spécifique est le suivant


<!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>
Copier après la connexion

. Fichier de style de base


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;
}
Copier après la connexion

fichier spring.css


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

fichier summer.css


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

change, fichier js


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();
};
Copier après la connexion

obtient principalement l'objet de balise de lien et remplace l'attribut href dans le lien

Recommandations associées :

Exemple détaillé de jQuery implémentant la fonction de changement de peau basée sur les cookies

jQuery+jQuery.cookie.js Exemple de code pour un plug-in permettant d'implémenter la fonction de changement de skin

Comment obtenir un effet de changement de skin de page Web

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal