网页风格切换
来源:互联网 发布:丁丁考勤软件 编辑:程序博客网 时间:2024/05/19 02:44
常见论坛都有风格切换的功能,通过点击按钮,网页由一种配色方案跳到另一种方案。
下面通过代码展示其原理。
首先准备两个CSS分别控制不同的风格。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>css</title>
<link title="C1" rel="stylesheet" href="C1.css" type="text/css" />
<link title="C2" rel="alternate stylesheet" href="C2.css" type="text/css" />
</head>
<body>
<span class="foo">文字</span>
<script type="text/javascript" language="javascript">
<!--
function SetActiveStyleSheet(title)
{
for (var i=0; i<document.getElementsByTagName("link").length; i++)
{
//循环所有名称为link的标签
var e = document.getElementsByTagName("link")[i];
if (e.getAttribute("rel").indexOf("style") != -1)
{
//这个link标签的rel属性含style,证明其作用是链接CSS文件的
if (e.getAttribute("title") == title)
{
//当前link对应的CSS就是要使用的CSS,将disabled属性设置为false表示启用
e.disabled = false;
}
else
{
e.disabled = true;
}
}
}
}
-->
</script>
<input type="button" value="C1" onclick="SetActiveStyleSheet(this.value);">
<input type="button" value="C2" onclick="SetActiveStyleSheet(this.value);">
</body>
</html>
- 网页风格切换
- 网页风格化用CSS实现皮肤适时切换
- 网页风格化用CSS实现皮肤适时切换
- 网页风格化 用CSS实现皮肤切换
- 网页制作用JavaScript实现不同风格的图片切换效果
- 动态切换窗体风格
- 网页设计风格变迁
- 切换kde风格和desktop风格
- aspx页面风格切换方法
- Android 切换应用主题风格
- 扁平化风格的网页
- 自定义网页风格的datagrid
- 网页切换背景音乐
- 网页语言切换
- 关于网页皮肤切换
- 网页切换效果
- 网页图片切换代码
- 网页中英文切换
- Silverlight 3 调用javascript 函数
- ARM7与ARM9的区别(转)
- 预处理,编译, 优化, 汇编, 链接
- Delphi 中如何安装组件?
- js验证IPv6地址是否相等
- 网页风格切换
- Datagridview操作
- 用DirectX Audio和DirectShow播放声音和音乐(3)
- 关于级数部分的求和与积分符号的交换计算
- VC++通用控件编程
- (?!exp) 零宽负向先行断言 (?<!exp) 零宽负向后行断言
- asp.net 邮件发送
- 微软WINDOWS AZURE PLATFORM(云系统)
- 江苏省昆山市软件公司汇总