如何实现多风格选择 样式实时切换?
如何实现多风格选择 样式实时切换?
Author:DivCSS Data:2007-01-28
我们在制作网站的时候,希望自己的网站是多风格的,用户可以根据自己的喜好选择不同的风格,这样的风格可以是布局上的变化,也可以是色彩上的差异,也可能是针对不同的用户群而特别定制的样式。
我们该如何实现多风格选择与样式的实时切换呢?
其实只是IE不支持这个功能,我们完全可以交给浏览器去完成,FireFox就支持这个功能。
假设我们有两套CSS,分别封闭在两个不同的文件中:a.CSS和b.CSS。然后在<head>和</head>之间加入如下两行XHTML代码:
<link rel="alternate stylesheet" type="text/css" title="主题B" href="b.css" />
然后用你的Firefox打开这个页面,在菜单栏中选择:查看 -> 页面风格,应该就可以看到“主题A”、“主题B”并可以实时进行选择了。
我们可以用的另外一种方法就是动态程序来完成,例如ASP、PHP、JSP等,这样做的好处是直接、高效、兼容性好、可以记忆用户选择。可以将用户的选择记入Cookies也可以直接写入到数据库中,当用户再次访问的时候,就直接调用上一次访问所选择的样式。具体的制作我们这里就不详述了,可以关注我们的网站www.52css.com,我们将不定期的推出这方面的内容。
现在我们该使用什么方法呢?让浏览器选择的方法,主流浏览器IE并不支持;用程序脚本来实现?当我的网页是静态的,也没有数据库。
我们只能选择用javascript的办法来搞定它了。我们看下面的代码:
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 = "";
documents.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = documents.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);
上面的代码就是实现多风格选择、实时样式切换的javascript脚本,我们可以将上面的代码另存为一个js文件,在需要的页面直接引用:
当然,你也可以直接将上面的代码直接写在页面内部。
我们的风格有三种,一种默认另外两种其它风格。将这三个css文件引入页面文件中:
<link rel="stylesheet" type="text/CSS" href="aaa.css" title="aaa" />
<link rel="stylesheet" type="text/CSS" href="bbb.css" title="bbb" />
好了,我们现在就可以在页面中,增加切换风格的链接了:
<a href="#" οnclick="setActiveStyleSheet('aaa',1); return false;">样式一-蓝色</a>
<a href="#" οnclick="setActiveStyleSheet('bbb',1); return false;">样式二-橙色</a>
现在我们就大功告成了,测试一下我们上面的成果,看看效果吧。
[ 可先修改部分代码 再运行查看效果 ]
现在我们就实现了在页面的多风格选择的样式实时切换!
转载于:https://blog.51cto.com/hehezhou/201825
如何实现多风格选择 样式实时切换?相关推荐
- 如何实现多风格选择样式实时切换?
我们在制作网站的时候,希望自己的网站是多风格的,用户可以根据自己的喜好选择不同的风格,这样的风格可以是布局上的变化,也可以是色彩上的差异,也可能是针对不同的用户群而非凡定制的样式. 我们该如何实现多风 ...
- 编辑画面,element-ui的单选框组选中值以及画面选择样式无法切换,但是绑定的v-model值已发生变化
今天碰到了一个特别奇葩的问题,使用element-ui的单选框组做选择,在新增的情况下,也就是form表单绑定的对象为空时,画面可以正常操作取出来的值也没有问题,但是在编辑的情况下,也就是form表单 ...
- 几行代码搞定Flash应用的多语言实时切换问题
在<WPF/Silverlight的数据绑定设计的真糟糕>文中批评了WPF/SL的数据绑定机制,拿的是Flex的数据绑定与其对比.本文介绍应用Flex的数据绑定来解决一个实际问题--多语言 ...
- vue、Cascader 级联选择、Cascader 属性事件方法、vue Cascader 所有级联选择样式、vue Cascader 级联选择全部属性事件方法
vue.Cascader 级联选择.Cascader 属性事件方法.vue Cascader 所有级联选择样式.vue Cascader 级联选择全部属性事件方法 Cascader 级联选择 何时使用 ...
- 分页标签精讲(仿百度雅虎淘宝共23种样式任意切换)-罗春龙-专题视频课程
分页标签精讲(仿百度雅虎淘宝共23种样式任意切换)-217人已学习 课程介绍 仿百度雅虎淘宝实现分页标签,需要学者有一定的JSP基础,该视频深入讲解分页标签业务逻辑处理: 课程收益 ...
- node.js+室内装修风格选择系统 毕业设计-附源码211552
node.js室内装修风格选择系统 摘 要 随着互联网技术的深入发展和成熟,"物联网时代"到来的呼声日益高涨,国家"十二五"规划中也明确将物联网作为战略性新兴 ...
- Python可视化中Matplotlib(3.线条的详细样式及线性、保存图片、plot的详细风格和样式)、背景色、点和线的详细设置
1.修改线条的样式: linestyle.color.marker(标记) '''颜色 color:修改颜色,可以简写成c样式 linestyle='--' 修改线条的样式 可以简写成 ls标注 ma ...
- 网络视频监控如何入门?如何安装和配置、设备选择和实时监控?
网络视频监控是一种先进的安全技术,它可以通过互联网连接到远程视频服务器,使用户可以随时随地监控所关注的地点.本文将介绍网络视频监控的基础入门知识,包括安装和配置.设备选择和实时监控等方面. 一.安装和 ...
- jQuery的属性与样式之增加样式、删除样式、切换样式
开发工具与关键技术:Visual Studio ASP.NET MVC 作者:刘剑鸿 撰写时间:2019年06月14日 星期五 jQuery的属性与样式之增加样式.删除样式.切换样式 1 .addCl ...
最新文章
- linux 命令之文件读取,head, tail, tailf, sed
- 观看5万个游戏视频后,英伟达AI学会了自己开发「吃豆人」
- Tensorflow-gpu安装
- Codeforces 1276C/1277F/1259F Beautiful Rectangle (构造)
- 一文带你看懂PaddleHub
- mysql aa复制_MySQL的复制架构与优化
- Python 读入Excel表时如何判空NaN
- 长春技师学院计算机系,长春技校排名前五十
- 跨域资源共享(CORS)-漏洞整理
- java中英文切换,Java实现多语言切换
- clappr:可扩展网页媒体播放器使用
- MySQL 行级锁(行锁、临键锁、间隙锁) 小白教程
- matlab图片surf图,用matlab实现SURF图像配准 算法
- Java如何实现实时消息提醒???
- 钣金缺口lisp_钣金件的编程展开及切割系统
- C语言利用泰勒级数sin(X)
- AOJ-AHU-OJ-6 Hero in maze(拓展)
- 科研利器scholarscope
- mysql修改数据库编码级_修改mysql数据库编码
- Rust 安装,卸载,nightly/stable版本切换(全局或工作空间),提高下载速度
热门文章
- python四种可变类型_Python的可变类型与不可变类型
- 我的世界pc正版好玩的服务器,都来看看好玩的服务器
- loadrunner java 环境_java应用程序及服务器优化过程及loadrunner测试效果
- itertools chain
- MySQL Encryption and Compression Functions(加密)
- matplotlib color 参数
- 数据可视化之单属性(字段)
- vSAN架构解析与6.7功能介绍
- Redis学习总结(23)——Redis如何实现故障自动恢复?浅析哨兵的工作原理
- Java基础学习总结(165)——API 安全最佳实践