js動態(tài)修改整個頁面樣式達到換膚效果
更新時間：2014年05月23日 09:54:07 作者：
這篇文章主要介紹了通過js動態(tài)修改整個頁面樣式達到換膚效果,需要的朋友可以參考下
jsPro1\js動態(tài)修改整個html頁面樣式(換膚).html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>動態(tài)修改頁面樣式</title>
<link href="css/blue.css" rel="stylesheet" id="mylink"/>
<script type="text/javascript">
function gel(id) {
return document.getElementById(id);
}
window.onload = function() {
//更換css文件
var lis = gel("uList").childNodes;
for (var i = 0; i < lis.length; i++) {
if (lis[i].nodeType == 1) {
lis[i].onclick = function () {
gel("mylink").href = "css/" + this.className + ".css";
};
}
}
};
</script>
</head>
<body>
<div>
<span>修改整個頁面的樣式</span><br/>
<input type="text" id="txt"/>
<input type="button" value="提交" class="btn"/>
</div>
<ul id="uList" style="text-decoration: none;margin-top: 100px;">
<li style="display: block;width: 30px;height: 20px;background-color: red;" class="red"></li>
<li style="display: block;width: 30px;height: 20px;background-color: blue" class="blue"></li>
</ul>
</body>
</html>
jsPro1\css\red.css
* {
margin: 0px;padding: 0px;
}
body {
background-color: #eeeeee;
}
span {
color: red;
}
#txt {
color: #f00;border: 1px solid #7d1515;
}
.btn {
background-color: #a52a2a;border: none;color: white;width: 100px;height: 28px;
}
jsPro1\css\blue.css
* {
margin: 0px;padding: 0px;
}
body {
background-color: #eeeeee;
}
span {
color: blue;
}
#txt {
color: #0000cd;border: 1px solid #006400;
}
.btn {
background-color: #0000cd;border: none;color: white;width: 100px;height: 28px;
}
復制代碼 代碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>動態(tài)修改頁面樣式</title>
<link href="css/blue.css" rel="stylesheet" id="mylink"/>
<script type="text/javascript">
function gel(id) {
return document.getElementById(id);
}
window.onload = function() {
//更換css文件
var lis = gel("uList").childNodes;
for (var i = 0; i < lis.length; i++) {
if (lis[i].nodeType == 1) {
lis[i].onclick = function () {
gel("mylink").href = "css/" + this.className + ".css";
};
}
}
};
</script>
</head>
<body>
<div>
<span>修改整個頁面的樣式</span><br/>
<input type="text" id="txt"/>
<input type="button" value="提交" class="btn"/>
</div>
<ul id="uList" style="text-decoration: none;margin-top: 100px;">
<li style="display: block;width: 30px;height: 20px;background-color: red;" class="red"></li>
<li style="display: block;width: 30px;height: 20px;background-color: blue" class="blue"></li>
</ul>
</body>
</html>
jsPro1\css\red.css
復制代碼 代碼如下:
* {
margin: 0px;padding: 0px;
}
body {
background-color: #eeeeee;
}
span {
color: red;
}
#txt {
color: #f00;border: 1px solid #7d1515;
}
.btn {
background-color: #a52a2a;border: none;color: white;width: 100px;height: 28px;
}
jsPro1\css\blue.css
復制代碼 代碼如下:
* {
margin: 0px;padding: 0px;
}
body {
background-color: #eeeeee;
}
span {
color: blue;
}
#txt {
color: #0000cd;border: 1px solid #006400;
}
.btn {
background-color: #0000cd;border: none;color: white;width: 100px;height: 28px;
}
相關文章
如何在JavaScript中等分數(shù)組的實現(xiàn)
這篇文章主要介紹了如何在JavaScript中等分數(shù)組的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
在閱讀一些框架的源碼時發(fā)現(xiàn)了new static(),和new self(),甚是不解,后來查閱資料,才了解了,所以下面這篇文章主要給大家介紹了關于php類中static與self的使用區(qū)別的相關資料,需要的朋友可以參考下2021-06-06
原生js如何實現(xiàn)call,apply以及bind
這篇文章主要介紹了原生js實現(xiàn)call,apply以及bind，幫助大家更好的理解和學習使用JavaScript，感興趣的朋友可以了解下2021-04-04
朋友公司開發(fā)的在線JS加密站點，內(nèi)測中，自己試過不能找到加密后的源代碼，不知道還有那位大大能夠破解2008-11-11
這篇文章主要介紹了簡單理解js的prototype屬性及使用 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
Firefox中beforeunload事件的實現(xiàn)缺陷淺析
beforeunload 指在頁面卸載前提供的最后一次JS執(zhí)行的機會2012-05-05
使用Firebug調試JavaScript非常方便。因為js的錯誤不容易查找，用這個就方便多了。2011-04-04
JS控制非法字符的輸入實現(xiàn)代碼，需要的朋友可以參考下。2009-12-12
我們在微信小程序開發(fā)的時候,手機號的驗證是經(jīng)常需要操作的,那么如何驗證手機號呢?這篇文章主要給大家介紹了關于微信小程序判斷手機號是否合法的相關資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了js控制網(wǎng)頁前進和后退的方法,涉及javascript中history.go方法的相關使用技巧,非常簡單實用,需要的朋友可以參考下2015-06-06