快捷導(dǎo)航

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

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

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

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

<!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標(biāo)簽對(duì)象，替換link里面的屬性href

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

使用ECharts進(jìn)行數(shù)據(jù)可視化的代碼詳解
ECharts 是一個(gè)由百度開源的強(qiáng)大、靈活的 JavaScript 圖表庫(kù),用于在 Web 頁(yè)面上創(chuàng)建各種類型的數(shù)據(jù)可視化圖表,它具有豐富的圖表類型、強(qiáng)大的配置選項(xiàng)和良好的跨平臺(tái)兼容性,本文介紹了如何使用ECharts進(jìn)行數(shù)據(jù)可視化,需要的朋友可以參考下
2024-08-08
Vuejs通過(guò)拖動(dòng)改變?cè)貙挾葘?shí)現(xiàn)自適應(yīng)
這篇文章主要介紹了Vuejs通過(guò)拖動(dòng)改變?cè)貙挾葘?shí)現(xiàn)自適應(yīng),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-09-09
微信小程序地圖繪制線段并且測(cè)量(實(shí)例代碼)
這篇文章主要介紹了微信小程序地圖繪制線段并且測(cè)量,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-01-01
JavaScript數(shù)組迭代器實(shí)例分析
這篇文章主要介紹了JavaScript數(shù)組迭代器的用法,涉及javascript數(shù)組操作的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
傾力總結(jié)40條常見的移動(dòng)端Web頁(yè)面問(wèn)題解決方案
移動(dòng)端Web需要照顧觸摸操作的體驗(yàn),以及更多的屏幕旋轉(zhuǎn)與尺寸適配等問(wèn)題,非?，嵥?在這里為大家傾力總結(jié)40條常見的移動(dòng)端Web頁(yè)面問(wèn)題解決方案,歡迎收看收藏!
2016-05-05
uni-app中彈窗的使用與自定義彈窗
眾所周知彈窗在我們實(shí)際開發(fā)場(chǎng)景中是非常常用的,最近在工作中就遇到了相關(guān)需求,所以下面這篇文章主要給大家介紹了關(guān)于uni-app中彈窗使用與自定義彈窗的相關(guān)資料,需要的朋友可以參考下
2022-04-04
JavaScript給按鈕綁定點(diǎn)擊事件（onclick）的方法
這篇文章主要介紹了JavaScript給按鈕綁定點(diǎn)擊事件（onclick）的方法,涉及javascript綁定onclick的基本技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-04-04
通過(guò)實(shí)例解析js簡(jiǎn)易模塊加載器
這篇文章主要介紹了通過(guò)實(shí)例解析js簡(jiǎn)易模塊加載器，隨著前端工程越來(lái)越復(fù)雜，代碼越來(lái)越多，模塊化成了必不可免的趨勢(shì)。,需要的朋友可以參考下
2019-06-06
原生js實(shí)現(xiàn)輪播圖特效
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)輪播圖特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05
javascript 面向?qū)ο蠹夹g(shù)基礎(chǔ)教程
看了很多介紹javascript面向?qū)ο蠹夹g(shù)的文章,很暈.為什么?不是因?yàn)閷懙貌缓?而是因?yàn)樘願(yuàn)W.
2009-12-12