通过改变外嵌CSS样式文件即时改变网页样式

大可山人

于 2009-07-14 09:12:00 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

文章标签： css javascript stylesheet border file function

本文链接：https://blog.youkuaiyun.com/johnsuna/article/details/4346258

本文介绍了一种使用JavaScript和HTML实现的动态更改网页样式的技巧。通过点击图片的不同区域，可以即时加载不同的CSS样式文件，从而快速改变网页的整体视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下例通过改变外嵌CSS样式文件即时改变网页样式：

在<head>....</head>之间放置以下内容：

<link href="css/style01.css" rel="stylesheet" type="text/css"　id="cssStyle" >

<script type="text/javascript">
　 function mm_changeStyle(file){
　　 document.getElementById("cssStyle").setAttribute("href",file);
}
</script>

以下内容置于<body>....</body>之间：

<img src="img/changeStylebt.gif" alt="" width="101" height="42" usemap="#Map" border="0"/>

<map name="Map" id="Map">
　　<area shape="rect" coords="39,15,50,27"
　　 href="Javascript:mm_changeStyle('css/style01.css');" />
　　<area shape="rect" coords="56,15,68,26"
　　 href="Javascript:mm_changeStyle('css/style02.css');" />
　 <area shape="rect" coords="73,15,84,27"
　　 href="Javascript:mm_changeStyle('css/style03.css');"/>
</map>