标签:皮肤,rel,css
内容摘要:您是否想让您的网站有多种显示风格呢,本文介绍了如何使用CSS结合js实现动态更换页面皮肤风格。看了下面的介绍您就明白了如何实现了这一功能了,赶快动手吧!
为了方便实现这一功能,我们在设计网站的时候最好使用CSS+div来布局,我们把基本的CSS抽取出来命名为style.css。所有的页面样式都写在style.css中。本例实现的是页面字体大小的变换。这个文件不论字体是放大还是缩小都要用。然后我们根据需要再划分3个css文件。分别定义了大,中,小字体的时候页面的元素外观。
在html的顶部引用css文件。
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="text-small.css" title="Small Text" />
<link rel="alternate stylesheet" type="text/css" href="text-medium.css" title="Medium Text" />
<link rel="alternate stylesheet" type="text/css" href="text-large.css" title="Large Text" />
细心的你会看到上面的rel属性有不同。对了,这就是关键,html认为只有rel="stylesheet"的css文件才会被最终调用。我们只需要编写一个js脚本来修改各个css的rel属性就可以实现更换不同的css了。
在HTML内容区的最上面增加
<script type="text/javascript" src="switcher.js"></script>
switcher.js代码如下
/* Style Switcher by Paul Sowden, see A List Apart:
http://www.alistapart.com/articles/alternate/ */
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled)
return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(’;’);
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==’ ’) c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
document.writeln("<div id=\"textsize\">Text Size: <a href=\"#\" onclick=\"setActiveStyleSheet
(’Small Text’); return false;\" title=\"Switch to Small Text Size\" id=\"text-small\">S</a><a
href=\"#\" onclick=\"setActiveStyleSheet(’Medium Text’); return false;\" title=\"Switch to
Medium Text Size\" id=\"text-medium\">M</a><a href=\"#\" onclick=\"setActiveStyleSheet(’Large
Text’); return false;\" title=\"Switch to Large Text Size\" id=\"text-large\">L</a></div>");
复制上面的代码另存为switcher.js文件即可,
switcher.js会在html页面中增加更换字体大小的链接按钮,并实现CSS文件的转换。
顺着这个思路,你可以制作更换皮肤,更换布局等以及更多的我想不到的效果。
0
投稿
猜你喜欢
- <!-- #include file="../conn.asp" --&
- 前段时间冷空气突袭的时候,据说郊区密云的雪积得挺厚,但北京城内除了飘了一点小雪粒,毫无动静。应该是气温过高所致,我在慈云寺桥附近拍下的照片可
- 用过QQ的人应该都知道软键盘,他可以增强我们密码的安全性,以保证我们的密码资料不被非法监听。现在软键盘也用在了很多的网站上,像早期银行的在线
- 最近写了两个管理后台的前端页面,其中有一个管理后台,左侧菜单导航和右侧内容页是两个iframe,需求是,点击上面的主导航时,左侧iframe
- MySQL支持大量的列类型,它可以被分为3类:数字类型、日期和时间类型以及字符串(字符)类型。本节首先给出可用类型的一个概述,并且总结每个列
- 有很多种方法来实现图片的预加载,通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧,用CSS你就可以毫
- 表单在提交前我们通常会用客户端JS对其内容进行验证,通常都是写一个函数然后在onsumbit事件中调用,如下:<html><
- 在CSS布局中,ul,li的运用是非常常见的。配合DIV与CSS,创建无表格布局。 其实Dreamweaver中也有自带的CSS布局的范例,
- 检测是否注册成功<% Set Jpeg =Server.CreateObject("Persi
- 可以使用 XDR(简化 XML-Data)架构创建关系数据的 XML 视图。然后可以使用 XPath 查询来查询这些视图。这类似于使用 CR
- select for update 这个是行级锁 当 commit或者rollback时,锁释放 记得打开事务,比如jdbc里面 setAu
- 只是做笔记,没什么!! 代码如下:--创建测试表 CREATE TABLE [dbo].[Student]( [ID] [int
- 今天研究了一下JS的用setAttribute方法实现一个页面两份样式表的效果,具体方法如下:第一步:在连接样式表的元素里定义一个id,例如
- 在开发Web应用时,无一例外地需要访问数据库,以完成对数据的查询、插入、更新、删除等操作。受应用逻辑的影响,有时需要将多条数据库操作指令组成
- 在DreamWeaver中编写CSS,这种编写习惯并不提倡,不过由于"可视化"和操作简便,使用的朋友依然很多,今天罗列一
- 为什么页面出现乱码?为什么数据库里出现乱码?为什么这些乱码的出现几率飘忽不定了?诸如此类的乱码问题困扰了很多WEB开发人员。假如不将这背后的
- 作者: Terrance译者:Sheneyan(子乌)时间:2010.2.6英文原文:13 Useful WordPress SQL Que
- 将转储设备加入到SQL Server备份数据库的地方。在SEM中转储设备是可见性的,并且在设备上的信息被存储在主要数据库的sysdevice
- 我们都知道在9i之前,要想获得建表和索引的语句是一件很麻烦的事。我们通常的做法都是通过export with rows=no来得到,但它的输
- 一个封装好的JavaScript拖动类,使用方便:<div id="idDrag" style="bor