利用javascript實現一個簡單的網頁切換主題的應用,在網頁中添加<select></select>元素可以選擇主題,將每個主題添加到<option></option>中,然後可以通過選擇主題來切換主題。本文中只是簡單實現該功能,是自己在學習javascript時的一點小應用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>切換主題</title>
<link id="link1" rel="stylesheet" type="text/css" href="1.1.css"/>
<script type="text/javascript">
function change(){
var c=document.getElementById("select1").value;//獲取<select>元素當前選中的值
var c1="1."+c+".css";//構造出href的不同屬性值
document.getElementById("link1").href=c1;//賦不同的值,切換css樣式文件
//d=c1;
}
</script>
</head>
<body>
<select id="select1" οnchange="change()">//切換主題的事件源是<select>,事件監聽onchang(),
<option value="1">主題1</option>
<option value="2">主題2</option>
</select>
<div >ssssssssssssssss</div>
<table width="200" border="2">
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
</table>
</body>
</html>
1.1.css外部樣式表
div{background-color:#3366FF;
font-family:"宋體";
font-size:14px;}
table{background-color:#FFFF66;
margin-top:300px;}
1.2.css外部樣式表
div{background-color:#ff0000;
font-family:"宋體";
font-size:50px;}
table{background-color:#3366CC;
margin-top:10px;}
由於自己側重練習javascript,外部樣式表設計的並不美觀,見笑了。
分析到在切換不同的外部樣式表時,事件源是<select>,當<select>中的選項發生改變時,確定監聽事件爲onchange(),事件發生後執行函數change().切換主題就是改變引入不同的外部樣式文件.css即改變href的屬性值,通過改變href的值切換主題。
運行瀏覽器的截圖是: