用JavaScript实现一个页面两份样式表

最新推荐文章于 2024-09-05 11:00:53 发布

davinci_2012

最新推荐文章于 2024-09-05 11:00:53 发布

阅读量273

点赞数

文章标签： javascript css xhtml html 文档 rss

本文链接：https://blog.csdn.net/davinci_2012/article/details/6516333

版权

　　样式表可以对页面的样式进行定义，进而使页面能够呈现出不同的表现形式。本节实例给出了用JavaScript实现一个页面两份样式表的实现方法，这样一个页面可以选择不同的样式内容。

　　本节代码主要使用了onMouseOver事件和src属性，主要功能和用法如下：

　　• 当鼠标单击页面的标签时，onClick事件会被触发。该事件可以调用相应的函数，作为其事件处理函数。在函数中，可以是任意合法的JavaScript代码。

　　• setAttribute()方法的作用是添加一个新的属性。如果一个元素中的属性名称已经存在，那么新添加的属性值将恢复为原来的值。

　　• HTML和XHTML中有一种机制，使网站作者可以在HTML文档中加入相关的外部信息。这些外部信息既可以是样式信息（CSS，层叠样式表单），也可以是网站的导航辅助信息，还可以是其他格式的信息源（RSS，Really Simple Syndication），甚至是站长的联络方式等。LINK元素（<link>）正是用来在文档头（HEAD）元素中添加这些信息的。

Code:

<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>
<p><a href="#" mce_href="#" onClick="change(1)">应用第一个样式</a></p>
<p><a href="#" mce_href="#" onClick="change(2)">应用第二个样式</a></p>
<div id="css1">样式应用元素</div>
</center>
</body>
</html>

1. css

Code:

a {color:#00007F;text-decoration:none;}
a:hover {color:#00007F;text-decoration:underline;

2. css

Code:

a {color:#ff0000;text-decoration:none;}
a:hover {color:#ff0000;text-decoration:underline;}

　　运行该程序后，页面出现一组超级链接和一个文字，文字呈蓝色显示，当鼠标单击第二个相应的超级链接时，文字颜色变为红色，如下图所示。

用JavaScript实现一个页面两份样式表

转载地址：http://www.xuekaifa.com/article/20101024/000244.html

davinci_2012

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript实现一个页面两份样式表

　　样式表可以对页面的样式进行定义，进而使页面能够呈现出不同的表现形式。本节实例给出了用JavaScript实现一个页面两份样式表的实现方法，这样一个页面可以选择不同的样式内容。　　本节代码主要使用了onMouseOver事件和src属性，主要功能和用法如下：　　• 当鼠标单击页面的标签时，onClick事件会被触发。该事件可以调用相应的函数，作为其事件处理函数。在函数中，可以是任意合法
复制链接

扫一扫