js實現(xiàn)網(wǎng)頁換膚
本文實例為大家分享了js實現(xiàn)網(wǎng)頁換膚的具體代碼,供大家參考,具體內(nèi)容如下
效果:
代碼:
<!DOCTYPE html> <html> ?? ?<head> ?? ??? ?<meta charset="utf-8"> ?? ??? ?<title></title> ?? ??? ?<style type="text/css"> ?? ??? ??? ?*{ ?? ??? ??? ??? ?margin: 0px; ?? ??? ??? ??? ?padding: 0px; ?? ??? ??? ?} ?? ??? ??? ?body{ ?? ??? ??? ??? ?height: 100%; ?? ??? ??? ??? ?width: 100%; ?? ??? ??? ??? ? ?? ??? ??? ?} ?? ??? ??? ?#main{ ?? ??? ??? ??? ?height: 720px; ?? ??? ??? ??? ?width: 100%; ?? ??? ??? ??? ?background-color: pink; ?? ??? ??? ?} ?? ??? ??? ?button{ ?? ??? ??? ??? ?height: 15px; ?? ??? ??? ??? ?width: 15px; ?? ??? ??? ??? ?border: 1px solid #fff; ?? ??? ??? ??? ?margin: 10px 10px; ?? ??? ??? ??? ? ?? ??? ??? ?} ?? ??? ??? ?#red{ ?? ??? ??? ??? ?background-color: red; ?? ??? ??? ?} ?? ??? ??? ?#green{ ?? ??? ??? ??? ?background-color: green; ?? ??? ??? ?} ?? ??? ??? ?#blue{ ?? ??? ??? ??? ?background-color: blue; ?? ??? ??? ?} ?? ??? ??? ? ?? ??? ?</style> ?? ?</head> ?? ?<body> ?? ??? ?<div id="main"> ?? ??? ??? ?<button type="button" id="red" onclick="red()"></button> ?? ??? ??? ?<button type="button" id="green" onclick="green()"></button> ?? ??? ??? ?<button type="button" id="blue" onclick="blue()"></button> ?? ??? ?</div> ?? ??? ? ?? ??? ?<script type="text/javascript"> ?? ??? ??? ?var x=document.getElementById('main'); ?? ??? ??? ?function red(){ ?? ??? ??? ??? ?x.style.backgroundColor='red'; ?? ??? ??? ??? ? ?? ??? ??? ??? ?document.getElementById('red').style.border="3px solid white"; ?? ??? ??? ??? ?document.getElementById('green').style.border="1px solid white"; ?? ??? ??? ??? ?document.getElementById('blue').style.border="1px solid white"; ?? ??? ??? ??? ? ?? ??? ??? ?} ?? ??? ??? ?function green(){ ?? ??? ??? ??? ?x.style.backgroundColor='green'; ?? ??? ??? ??? ?document.getElementById('green').style.border="3px solid white"; ?? ??? ??? ??? ?document.getElementById('red').style.border="1px solid white"; ?? ??? ??? ??? ?document.getElementById('blue').style.border="1px solid white"; ?? ??? ??? ?} ?? ??? ??? ?function blue(){ ?? ??? ??? ??? ?x.style.backgroundColor='blue'; ?? ??? ??? ??? ?document.getElementById('blue').style.border="3px solid white"; ?? ??? ??? ??? ?document.getElementById('red').style.border="1px solid white"; ?? ??? ??? ??? ?document.getElementById('green').style.border="1px solid white"; ?? ??? ??? ?} ?? ??? ?</script> ?? ?</body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
一個類似vbscript的round函數(shù)的javascript函數(shù)
同vbscript的Round函數(shù)功能相同,四舍五入保留指定小數(shù)位數(shù)2009-04-04js防抖-節(jié)流函數(shù)的基本實現(xiàn)和補充詳解
這篇文章主要介紹了防抖-節(jié)流函數(shù)的基本實現(xiàn)和補充,文章從基礎(chǔ)概念到手寫對防抖-節(jié)流函數(shù)的實現(xiàn)進行講解,內(nèi)容詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-01-01IE Firefox 使用自定義標(biāo)簽的區(qū)別
IE Firefox 使用自定義標(biāo)簽的區(qū)別,需要的朋友可以參考下。2009-10-10微信小程序?qū)崿F(xiàn)導(dǎo)航欄選項卡效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)導(dǎo)航欄選項卡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-02-02JS實現(xiàn)點擊表頭表格自動排序(含數(shù)字、字符串、日期)
這篇文章主要介紹了利用JS如何實現(xiàn)點擊表頭后表格自動排序,其中包含數(shù)字排序、字符串排序以及日期格式的排序,文中給出了完整的示例代碼,相信對大家具有一定的參考價值,感興趣的朋友們一起來看看吧。2017-01-01微信小程序 多行文本顯示...+顯示更多按鈕和收起更多按鈕功能
這篇文章主要介紹了微信小程序多行文本顯示...+顯示更多按鈕和收起更多按鈕,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09微信小程序?qū)崿F(xiàn)動態(tài)設(shè)置頁面標(biāo)題的方法【附源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)動態(tài)設(shè)置頁面標(biāo)題的方法,涉及微信小程序button組件事件綁定及頁面元素屬性動態(tài)設(shè)置相關(guān)實現(xiàn)技巧,并附帶完整源碼供讀者下載參考,需要的朋友可以參考下2017-11-11