生活随笔
收集整理的這篇文章主要介紹了
网页换肤
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在script標簽中編寫保存cookie信息的方法，用于將CSS樣式的文件的路徑信息保存到客戶端Cookie文件中
function writeCookie(csspath){var today=new Date();var expires=new Date();expires.setTime(today.getTime()+1000*60*60*24*30);//有效期為30天var str="cssPath="+csspath+";expires="+expires.toGMTString()+";";document.cookie=str;}
編寫讀取cookie信息的方法
function readCookie(cookieName){ var search=cookieName+"="; if(document.cookie.length>0){offset=document.cookie.indexOf(search); if(offset!=-1){offset+=search.length;end=document.cookie.indexOf(";",offset);if(end==-1){end=document.cookie.length;return unescape(document.cookie.substring(offset,end));} } }
}
編寫超鏈接的onClick事件調用的方法
function change(type){if(type=="orange"){document.getElementById("myCss").href="orange.css";writeCookie("orange.css");}if(type=="gray"){document.getElementById("myCss").href="gray.css";writeCookie("gray.css");}}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>統一樣式頁面</title>
<link id="myCss" href="orange.css" rel="stylesheet">
</head>
<body>
<a href="#" onclick="change('orange')">[橘色]</a>
<a href="#" onclick="change('gray')">[灰色]</a>
<from action=""><table align="center"><tr><td>用戶名:</td><td><input type="text" name="name"></td></tr><tr><td>密碼:</td><td><input type="password" name="pwd"></td></tr><tr><td>確認密碼</td><td><input type="password" name="pwd1"></td></tr><tr><td>姓名:</td><td><input type="radio" name="sex" value="m">男<input type="radio" name="sex" value="f">女</td></tr><tr><td>年齡</td><td><input type="text" name="age"></td></tr><tr><td><input class="botton1" type="submit" value="注冊"></td><td><input class="botton2" type="button" value="重置"></td></tr></table>
</from><script type="text/javascript">function writeCookie(csspath){var today=new Date();var expires=new Date();expires.setTime(today.getTime()+1000*60*60*24*30);//有效期為30天var str="cssPath="+csspath+";expires="+expires.toGMTString()+";";document.cookie=str;}function readCookie(cookieName){var search=cookieName+"=";if(document.cookie.length>0){offset=document.cookie.indexOf(search);if(offset!=-1){offset+=search.length;end=document.cookie.indexOf(";",offset);if(end==-1){end=document.cookie.length;return unescape(document.cookie.substring(offset,end));}}}}function change(type){if(type=="orange"){document.getElementById("myCss").href="orange.css";writeCookie("orange.css");}if(type=="gray"){document.getElementById("myCss").href="gray.css";writeCookie("gray.css");}}
</script>
</body>
</html>
orange.css
body{
margin:2em;background-color:#FF9900;
}
td{font-family:"Times New Roman",Times,serif;font-size:14px;font-weight:bold;
}
input{font-size:9pt;color:#003399;font-family:宋體;border:'1px' 'dashed' '#999999';background:#EEEEEE;
}
.td1{font-size:12pt;font-family:黑體;
}
.botton1{background:#FFFFFF;font-weight:bold;width:50px;
}
gray.css
body{
margin:2em;background-color:#999999;
}
td{font-family:"Times New Roman",Times,serif;font-size:14px;font-weight:bold;
}
input{font-size:9pt;color:#003399;font-family:宋體;border:'1px' 'dashed' '#999999';background:#EEEEEE;
}
.td1{font-size:12pt;font-family:黑體;
}
.botton1{background:#FFFFFF;font-weight:bold;width:50px;
}
總結
以上是生活随笔 為你收集整理的网页换肤 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
