本文介绍了一个简单的JavaScript程序，用于实现在同一页面上切换不同样式表的功能。通过点击链接，页面会动态更新样式。
样式表可以对页面的样式进行定义，进而使页面能够呈现出不同的表现形式。本节实例给出了用JavaScript实现一个页面两份样式表的实现方法，这样一个页面可以选择不同的样式内容。
本节代码主要使用了onMouseOver事件和src属性，主要功能和用法如下：
• 当鼠标单击页面的标签时，onClick事件会被触发。该事件可以调用相应的函数，作为其事件处理函数。在函数中，可以是任意合法的JavaScript代码。
• setAttribute()方法的作用是添加一个新的属性。如果一个元素中的属性名称已经存在，那么新添加的属性值将恢复为原来的值。
• HTML和XHTML中有一种机制，使网站作者可以在HTML文档中加入相关的外部信息。这些外部信息既可以是样式信息（CSS，层叠样式表单），也可以是网站的导航辅助信息，还可以是其他格式的信息源（RSS，Really Simple Syndication），甚至是站长的联络方式等。LINK元素（<link>）正是用来在文档头（HEAD）元素中添加这些信息的。
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>用JavaScript实现一个页面两份样式表</title>
- <link href="1.css" mce_href="1.css" rel="stylesheet" type="text/css" id="css">
- <script language="javascript">
- function change(a) { //函数:改变样式
- var css = document.getElementById('css'); //得到标签元素
- if(a == 1) //如果等于1
- css.setAttribute('href', '1.css'); //设置css样式链接
- if(a==2) //如果等于2
- css.setAttribute('href', '2.css'); //设置css样式链接
- }
- </script>
- </head>
- <body>
- <center>
- <h1>用JavaScript实现一个页面两份样式表</h1>
- <hr>
- <!-- 添加onClick事件函数 -->
- <p><a href="#" mce_href="#" onClick="change(1)">应用第一个样式</a></p>
- <!-- 添加onClick事件函数 -->
- <p><a href="#" mce_href="#" onClick="change(2)">应用第二个样式</a></p>
- <div id="css1">样式应用元素</div>
- </center>
- </body>
- </html>
1. css
- a {color:#00007F;text-decoration:none;}
- a:hover {color:#00007F;text-decoration:underline;
2. css
- a {color:#ff0000;text-decoration:none;}
- a:hover {color:#ff0000;text-decoration:underline;}
运行该程序后，页面出现一组超级链接和一个文字，文字呈蓝色显示，当鼠标单击第二个相应的超级链接时，文字颜色变为红色，如下图所示。
转载地址：http://www.xuekaifa.com/article/20101024/000244.html
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
