javascript的應用,簡單設計切換網頁主題的應用

利用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的值切換主題。

運行瀏覽器的截圖是:



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章