js Dom實現(xiàn)換膚效果

更新時間：2017年10月21日 09:05:45 作者：數(shù)星星的咚咚咚

這篇文章主要為大家詳細介紹了js Dom實現(xiàn)換膚效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Android九宮格圖片展示的具體代碼，供大家參考，具體內容如下

<!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>季節(jié)</span>
  <button>換膚</button>
 </header>
 <div class="main">
 </div>
</body>
</html>

基本樣式文件

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文件

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

summer.css文件

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

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

主要是取得link標簽對象，替換link里面的屬性href

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

微信小程序實現(xiàn)幸運大轉盤功能的示例代碼
這篇文章主要介紹了如何在微信小程序中實現(xiàn)幸運大轉盤功能，參與用戶點擊抽獎便可抽取輪盤的獎品，感興趣的小伙伴可以跟隨小編一起動手試一試
2022-03-03
TypeScript?使用?Tuple?Union?聲明函數(shù)重載
這篇文章主要介紹了TypeScript?使用?Tuple?Union?聲明函數(shù)重載，TypeScript 中為函數(shù)添加多個簽名后，依然需要添加相應的代碼來判斷并從不同的簽名參數(shù)列表中獲取對應的參數(shù)，下文就來探索方法和技巧吧
2022-04-04
如何阻止復制剪切和粘貼事件為了表單內容的安全
提交表單內容如（密碼）重要信息時，為了安全，需要阻止一些復制剪切和粘貼事件，下面與大家分享一個實例，感興趣的朋友可以參考下哈
2013-05-05
JS高仿拋物線加入購物車特效實現(xiàn)代碼
本篇文章主要介紹了JS高仿拋物線加入購物車特效實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2017-02-02
Bootstrap里的文件分別代表什么意思及其引用方法
這篇文章主要介紹了Bootstrap里的文件分別代表什么意思及其引用方法 ,需要的朋友可以參考下
2017-05-05
js修改元素樣式的九種方式總結
用慣了vue和react之后可能會慢慢淡忘掉原生的一些操作dom的幾種方式,有的時候確實需要我們通過原生的方式進行操作,下面這篇文章主要給大家介紹了關于js修改元素樣式的九種方式,需要的朋友可以參考下
2024-04-04
基于JavaScript實現(xiàn)留言板功能
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)留言板功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03
uni-app瀑布流效果實現(xiàn)方法
Uni-app是一個基于Vue.js開發(fā)跨平臺應用的框架,它可以將代碼編譯成多個平臺下的原生應用,這篇文章主要給大家介紹了關于uni-app瀑布流效果的相關資料,需要的朋友可以參考下
2023-12-12
JS實現(xiàn)文字掉落效果的方法
這篇文章主要介紹了JS實現(xiàn)文字掉落效果的方法,可實現(xiàn)文字往下掉落最終排序正常顯示的效果,具有一定參考借鑒價值,需要的朋友可以參考下
2015-05-05
JavaScript將DOM事件處理程序封裝為event.js 出現(xiàn)的低級錯誤問題
這篇文章主要介紹了JavaScript將DOM事件處理程序封裝為event.js 出現(xiàn)的低級錯誤問題做個筆錄，以防出現(xiàn)類似錯誤,需要的朋友可以參考下
2016-08-08