js Dom實現(xiàn)換膚效果
更新時間：2017年10月21日 09:05:45 作者：數(shù)星星的咚咚咚
這篇文章主要為大家詳細介紹了js Dom實現(xiàn)換膚效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了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標簽對象，替換link里面的屬性href
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用ECharts進行數(shù)據(jù)可視化的代碼詳解
ECharts 是一個由百度開源的強大、靈活的 JavaScript 圖表庫,用于在 Web 頁面上創(chuàng)建各種類型的數(shù)據(jù)可視化圖表,它具有豐富的圖表類型、強大的配置選項和良好的跨平臺兼容性,本文介紹了如何使用ECharts進行數(shù)據(jù)可視化,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了Vuejs通過拖動改變元素寬度實現(xiàn)自適應,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了微信小程序地圖繪制線段并且測量,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
這篇文章主要介紹了JavaScript數(shù)組迭代器的用法,涉及javascript數(shù)組操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06
移動端Web需要照顧觸摸操作的體驗,以及更多的屏幕旋轉(zhuǎn)與尺寸適配等問題,非常瑣碎,在這里為大家傾力總結(jié)40條常見的移動端Web頁面問題解決方案,歡迎收看收藏!2016-05-05
眾所周知彈窗在我們實際開發(fā)場景中是非常常用的,最近在工作中就遇到了相關(guān)需求,所以下面這篇文章主要給大家介紹了關(guān)于uni-app中彈窗使用與自定義彈窗的相關(guān)資料,需要的朋友可以參考下2022-04-04
JavaScript給按鈕綁定點擊事件（onclick）的方法
這篇文章主要介紹了JavaScript給按鈕綁定點擊事件（onclick）的方法,涉及javascript綁定onclick的基本技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了通過實例解析js簡易模塊加載器，隨著前端工程越來越復雜，代碼越來越多，模塊化成了必不可免的趨勢。,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細介紹了原生js實現(xiàn)輪播圖特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
javascript 面向?qū)ο蠹夹g(shù)基礎(chǔ)教程
看了很多介紹javascript面向?qū)ο蠹夹g(shù)的文章,很暈.為什么?不是因為寫得不好,而是因為太深奧.2009-12-12