javascript的应用，简单设计切换网页主题的应用

来源：互联网发布：淘宝数码相机编辑：程序博客网时间：2024/05/21 09:47

利用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" onchange="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的值切换主题。

运行浏览器的截图是：

0 0