样式表可以对页面的样式进行定义,进而使页面能够呈现出不同的表现形式。本节实例给出了用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