动态CSS站点教程：多个页面样式提供浏览者选择

在cnbruce''s blog上看到这个即时换STYLE的代码,觉得不错就COPY过来备用.
在见的例子就是:一个站点上有多个页面样式提供浏览者选择.同时,在选择了某样式后,再次打开该页面时,将仍然保持该样式.自然会想到了Cookie技术。

程序代码
<HTML>
<HEAD>
<link ID="skin" rel="stylesheet" type="text/css">
<TITLE>换肤技术</TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
function SetCookie(name,value){
var argv=SetCookie.arguments;
var argc=SetCookie.arguments.length;
var expires=(2<argc)?argv[2]:null;
var path=(3<argc)?argv[3]:null;
var domain=(4<argc)?argv[4]:null;
var secure=(5<argc)?argv[5]:false;
document.cookie=name+"="+escape(value)+((expires==null)?"":("; expires="+expires.toGMTString()))+((path==null)?"":("; path="+path))+((domain==null)?"":("; domain="+domain))+((secure==true)?"; secure":"");
}

function GetCookie(Name) {
var search = Name + "=";
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset,end));
}
}
return returnvalue;
}

var thisskin;
thisskin=GetCookie("nowskin");
if(thisskin!="")
skin.href=thisskin;
else
skin.href="css.css";

function changecss(url){
if(url!=""){
skin.href=url;
var expdate=new Date();
expdate.setTime(expdate.getTime()+(24*60*60*1000*30));
//expdate=null;
//以下设置COOKIES时间为1年,自己随便设置该时间..
SetCookie("nowskin",url,expdate,"/",null,false);
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>

<P>请选择下面的下拉菜单测试换肤效果</P>

<a href=# onclick="changecss(''css.css'')">css.css</a>
<a href=# onclick="changecss(''css1.css'')">css1.css</a>
<a href=# onclick="changecss(''css2.css'')">css2.css</a>
<a href=# onclick="changecss(''css3.css'')">css3.css</a>
<br>

<select onchange="changecss(this.value)">
<option>选择样式单文件</option>
<script language="javascript">
var csss=new Array();
csss[0]="css.css";
csss[1]="css1.css";
csss[2]="css2.css";
csss[3]="css3.css";
var i;
for(i=0;i<4;i++)
if(thisskin==csss[i])
document.write("<option value=\""+csss[i]+"\" selected>"+csss[i]+"样式单文件</option>");
else
document.write("<option value=\""+csss[i]+"\">"+csss[i]+"样式单文件</option>");
</script>
</select>
</BODY>
</HTML>

赞 (0)

相关推荐

  • 动态CSS站点教程：多个页面样式提供浏览者选择

    动态CSS站点教程：多个页面样式提供浏览者选择

    在cnbruce''s blog上看到这个即时换STYLE的代码,觉得不错就COPY过来备用.在见的例子就是:一个站点上有多个页面样式提供浏览者选择.同时,在选择了某样式后,再次打开该页面时,将仍然保持该样式.自然会想到了Cookie技术. 程序代码<HTML><HEAD><link ID="skin" rel="stylesheet" type="text/css"><TITLE>换肤技术<

  • 动态CSS，换肤技术

    见的例子就是:一个站点上有多个页面样式提供浏览者选择. 同时,在选择了某样式后,再次打开该页面时,将仍然保持该样式. 自然会想到了Cookie技术 以下是程序代码: <HTML> <HEAD> <link ID="skin" rel="stylesheet" type="text/css"> <TITLE>换肤技术</TITLE> <SCRIPT LANGUAGE=javascri

  • js动态修改整个页面样式达到换肤效果

    jsPro1\js动态修改整个html页面样式(换肤).html 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>动态修改页面样式

  • 动态改变ASP.net页面标题和动态指定页面样式表的方法

    如果需要让asp.net应用程序对用户留有一定有自定义空间,例如用户要对页面使用自己定义的样式表或标题,可以使用下面的方法来动态指定: 首先对ASPX文件中<HEAD>中的页面标题和样式表进行修改 Visual Studio 生成的代码: <title>WebForm1</Title> <LINK ref="stylesheet" type="text/css" href="control.css">

  • 微信小程序如何设置基本的页面样式，做出用户界面UI

    目录 一.总体样式 二.Flex 布局 三.WeUI 四.加入图片 五.图片轮播 一.总体样式 微信小程序允许在顶层放置一个app.wxss文件,里面采用 CSS 语法设置页面样式.这个文件的设置,对所有页面都有效. 注意,小程序虽然使用 CSS 样式,但是样式文件的后缀名一律要写成.wxss. 打开上一篇教程的示例,在项目顶层新建一个app.wxss文件,内容如下. page { background-color: pink; } text { font-size: 24pt; color:

  • jQuery Mobile动态刷新页面样式的实现方法

    jQuery Mobile动态刷新页面样式的实现方法

    当我们使用Ajax或者javascript动态在页面上添加元素后,如添加select控件的option元素,添加ul的li元素.添加之后我们会发现,它们显示的样式不是jQuery Mobile的炫酷样式了,而变成了很丑陋的元素样式.如下图所示: 代码如下: <script> function myFunction() { var ul = document.getElementById("myul"); var li1 = "<li data-role=\&

  • javascript实现动态CSS换肤技术的脚本

    <SCRIPT LANGUAGE=javascript>     <!--     function SetCookie(name,value){         var argv=SetCookie.arguments;         var argc=SetCookie.arguments.length;         var expires=(2<argc)?argv[2]:null;         var path=(3<argc)?argv[3]:null; 

  • Android 动态高斯模糊效果教程

    Android 动态高斯模糊效果教程

    写在前面 最近一直在做毕设项目的准备工作,考虑到可能要用到一个模糊的效果,所以就学习了一些高斯模糊效果的实现.比较有名的就是 FastBlur 以及它衍生的一些优化方案,还有就是今天要说的RenderScript . 因为这东西是现在需要才去学习的,所以关于一些图像处理和渲染问题就不提了.不过在使用的过程中确实能感受到,虽然不同的方案都能实现相同的模糊效果,但是效率差别真的很大. 本篇文章实现的高斯模糊是根据下面这篇文章学习的,先推荐一下.本文内容与其内容差不多,只是稍微讲的详细一点,并修改了代

  • 快速解决js动态改变dom元素属性后页面及时渲染的问题

    今天实现一个进度条加载过程,dom结构其实就是两个div <div class="pbar"> <div class="ui-widget-header" id="percent_bar" style="width: 23%;"></div> </div> 控制里层div的宽width属性,就能实现进度条往前走的效果. 我的进度条是显示下载文件的进度,简单实现一共100个文件的话

  • 微信小程序 教程之注册页面

    微信小程序 教程之注册页面

    系列文章: 微信小程序 教程之模块化 微信小程序 教程之注册页面 微信小程序 教程之注册程序 微信小程序--Page Page()函数用来注册一个页面.接受一个object参数,其指定页面的初始数据.生命周期函数.事件处理函数等. object参数说明: 属性 类型 描述 data Object 页面的初始数据 onLoad Function 生命周期函数--监听页面加载 onReady Function 生命周期函数--监听页面渲染完成 onShow Function 生命周期函数--监听页面

随机推荐