js動(dòng)態(tài)修改整個(gè)頁(yè)面樣式達(dá)到換膚效果
更新時(shí)間：2014年05月23日 09:54:07 作者：
這篇文章主要介紹了通過(guò)js動(dòng)態(tài)修改整個(gè)頁(yè)面樣式達(dá)到換膚效果,需要的朋友可以參考下
jsPro1\js動(dòng)態(tài)修改整個(gè)html頁(yè)面樣式(換膚).html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>動(dòng)態(tài)修改頁(yè)面樣式</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>修改整個(gè)頁(yè)面的樣式</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;
}
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>動(dòng)態(tài)修改頁(yè)面樣式</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>修改整個(gè)頁(yè)面的樣式</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
復(fù)制代碼 代碼如下:
* {
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
復(fù)制代碼 代碼如下:
* {
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;
}
相關(guān)文章
CodeMirror2 IE7/IE8 下面未知運(yùn)行時(shí)錯(cuò)誤的解決方法
最近用CodeMirror2作后臺(tái)的模板編輯器，在IE9、Firefox下面沒(méi)有問(wèn)題。到了IE7、IE8下面，textarea里面的代碼就顯示不出來(lái)了。搜索了好多，終于找到原因2012-03-03
全面解析JS字符串和正則表達(dá)式中的match、replace、exec等函數(shù)
這篇文章主要介紹了全面解析JS字符串和正則表達(dá)式中的match、replace、exec等函數(shù)的相關(guān)資料,需要的朋友可以參考下2016-07-07
這篇文章主要介紹了JS Ajax請(qǐng)求如何防止重復(fù)提交的相關(guān)資料，通過(guò)覆蓋掉$.ajax而達(dá)到防止重復(fù)提交的問(wèn)題，實(shí)現(xiàn)代碼簡(jiǎn)單，需要的朋友可以參考下2016-06-06
僅IE不支持setTimeout/setInterval函數(shù)的第三個(gè)以上參數(shù)
setTimeout/setInterval，這兩個(gè)函數(shù)相信前端開(kāi)發(fā)同學(xué)都很熟悉。它們?cè)诜荌E(6-9)瀏覽器中還可以如下使用2011-05-05
javascript 具名函數(shù)的四種調(diào)用方式 推薦
看四種方式執(zhí)行結(jié)果沒(méi)有區(qū)別。但如果函數(shù)有返回值的話，用new方式調(diào)用時(shí)可能會(huì)讓你有些失望。2009-07-07
JavaScript基礎(chǔ)之文件上傳與下載的實(shí)現(xiàn)詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)文件上傳與下載功能的相關(guān)資料，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的小伙伴可以學(xué)習(xí)一下2023-01-01
label+input實(shí)現(xiàn)按鈕開(kāi)關(guān)切換效果的實(shí)例
下面小編就為大家?guī)?lái)一篇label+input實(shí)現(xiàn)按鈕開(kāi)關(guān)切換效果的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
BOM系列第三篇之定時(shí)器應(yīng)用(時(shí)鐘、倒計(jì)時(shí)、秒表和鬧鐘)
這篇文章主要介紹了BOM系列第三篇之定時(shí)器應(yīng)用(時(shí)鐘、倒計(jì)時(shí)、秒表和鬧鐘) 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
jqgrid 表格數(shù)據(jù)導(dǎo)出實(shí)例
jqgrid并沒(méi)有自帶導(dǎo)出表格數(shù)據(jù)的方法，這里就自己實(shí)現(xiàn)了一個(gè)，嘗試過(guò)在頁(yè)面直接將數(shù)據(jù)導(dǎo)出，發(fā)現(xiàn)只有IE下可以通過(guò)調(diào)用saveas來(lái)實(shí)現(xiàn)，但是別的瀏覽器不支持，于是考慮將數(shù)據(jù)傳回后臺(tái)，然后后臺(tái)返回下載文件來(lái)實(shí)現(xiàn)2013-11-11
這篇文章主要介紹了js加入收藏夾代碼并兼容ie/ff/op,需要的朋友可以參考下2014-05-05