:带cookies功能

引用内容:
<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>

使用方法

将上面的代码存为 styleswitch.js

引用内容:
<script type="text/javascript" src="styleswitch.js"></script>

<link ID="skin" rel="stylesheet" type="text/css">
<P>请选择下面的下拉菜单测试换肤效果</P>

<a href=# οnclick="changecss('css.css')">css.css</a>
<a href=# οnclick="changecss('css1.css')">css1.css</a>
<a href=# οnclick="changecss('css2.css')">css2.css</a>
<a href=# οnclick="changecss('css3.css')">css3.css</a>
<br>
<select οnchange="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>

2:复杂一点的

引用内容:
function getCookie(Name) { 
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
}

function setCookie(name, value, days) {
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}

function deleteCookie(name){
setCookie(name, "moot")
}

function setStylesheet(title) {
var i, cacheobj
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").indexOf("style") != -1 && cacheobj.getAttribute("title")) {
cacheobj.disabled = true
if(cacheobj.getAttribute("title") == title)
cacheobj.disabled = false //enable chosen style sheet
}
}
}

function chooseStyle(styletitle, days){
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}

function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu 
var i
if (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){ //if element is a radio button or select menu
var element=(element.type=="select-one") ? element.options : element
for (i=0; i<element.length; i++){
if (element[i].value==selectedtitle){ //if match found between form element value and cookie value
if (element[i].tagName=="OPTION") //if this is a select menu
element[i].selected=true
else //else if it's a radio button
element[i].checked=true
break
}
}
}
}

var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet if there is one stored
setStylesheet(selectedtitle)

function externalLinks() { 
if (!document.getElementsByTagName) return; 
var anchors = document.getElementsByTagName("a"); 
for (var i=0; i<anchors.length; i++) { 
var anchor = anchors[i]; 
if (anchor.getAttribute("href") && 
anchor.getAttribute("rel") == "external") 
anchor.target = "_blank"; 


window.onload = externalLinks;

使用方法

将上面的代码存为 styleswitch.js

引用内容:
<script type="text/javascript" src="styleswitch.js"></script>

<link media="screen" href="css1.css" rel="stylesheet" type="text/css" title="default" />
<link media="screen" href="css2.css" rel="alternate stylesheet" type="text/css" title="blue" />
<link media="screen" href="css3.css" rel="alternate stylesheet" type="text/css" title="orange" />
<a title="默认风格" href="javascript:chooseStyle('default',5)">默认风格</a>
<a title="橙色风格" href="javascript:chooseStyle('orange',5)">橙色风格</a>
<a title="蓝色风格" href="javascript:chooseStyle('blue',5)">蓝色风格</a>

3:简单的方法

引用内容:
<script type="text/javascript">
function setStyle(title) {

//预定义变量
var i, links;

//用DOM方法获得所有的link元素
links = document.getElementsByTagName("link");

for(i=0; links[i]; i++) {

//判断此link元素的rel属性中是否有style关键字
//即此link元素是否为样式表link
//同时判断此link元素是否含有title属性
if(links[i].getAttribute("rel").indexOf("style") != -1
&& links[i].getAttribute("title")) {

//先不管三七二十一把它设为disabled
links[i].disabled = true;

//再判断它的title中是否有我们指定的关键字
if(links[i].getAttribute("title").indexOf(title) != -1)

//如果有则将其激活
links[i].disabled = false;
}
}
}
</script>

使用方法

将上面的代码存为 styleswitch.js

引用内容:
<script type="text/javascript" src="styleswitch.js"></script>

<link rel="stylesheet" type="text/css"
title="a" href="css0.css" />
<link rel="alternate stylesheet" type="text/css"
title="b" href="css1.css" />
<link rel="stylesheet" type="text/css"
title="c" href="css2.css" />
<link rel="stylesheet" type="text/css"
title="d" href="css3.css" />

<P>请选择下面的下拉菜单测试换肤效果</P>
<input type="button" value="清光" οnclick="setStyle('a');" />
<input type="button" value="冥焰" οnclick="setStyle('b');" />
<input type="button" value="冥焰" οnclick="setStyle('c');" />
<input type="button" value="冥焰" οnclick="setStyle('d');" />

4:用了一个可以隐藏的层来设定风格

引用内容:
// 隐藏显示换肤框
function ShowHideDiv(init) {
 if(document.getElementById("Sright").style.display == "block"){
   document.getElementById("Sright").style.display = "none";
  }
  else{
   document.getElementById("Sright").style.display = "block";
  }
}
//-->

其他的和上面的三种差不多

/Files/MaxIE/rogu_changecss.rar

转载于:https://www.cnblogs.com/MaxIE/archive/2006/11/03/549277.html

改变风格(css)的四种方法相关推荐

  1. 《云计算》linux改变主机名的四种方法

    hostnamectl 命令允许在 Linux 中设置三类主机名,它们的细节如下: ◈ 静态: 这是静态主机名,由系统管理员添加. ◈ 瞬时/动态: 这个由 DHCP 或者 DNS 服务器在运行时赋予 ...

  2. python sklearn.neural_network.MLPClassifier() 神经网络改变模型复杂度的四种方法

    MLPClassifier() 改变模型复杂度的四种方法 调整神经网络每一个隐藏层上的节点数 调节神经网络隐藏层的层数 调节activation的方式 通过调整alpha值来改变模型正则化的程度(增大 ...

  3. [Web 前端] 018 css 清除浮动的四种方法

    清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...

  4. CSS清除浮动的四种方法

    CSS清除浮动的四种方法 第一种:使用div空标签法 第二种:父元素使用overflow: hidden 第三种:伪元素选择器:after 第四种:伪元素选择器:before + after 第一种: ...

  5. Python 数据降噪处理的四种方法——均值滤波、小波变换、奇异值分解、改变binSize

    Python 数据降噪处理的四种方法--均值滤波.小波变换.奇异值分解.改变binSize github主页:https://github.com/Taot-chen 一.均值滤波 1)算法思想 给定 ...

  6. 前端面试题:使用css生成田字格的四种方法

    使用css生成田字格的四种方法 html结构 css基础样式 第一种 flex布局 第二种 绝对定位 第三种 css瀑布流 第四种 float浮动 html结构 <div class=" ...

  7. html如何引入css文件?HTML引入外部css文件的四种方法

    在学习前端的时候,我们应该知道css给html标记添加各种样式,用来告诉浏览器,因该如何显示这些标记里面的内容.既然css是用来给html添加各种样式的,那么,html中如何引入外部的css文呢?本篇 ...

  8. css中div居中显示的四种方法

    css中设置div元素居中显示的四种方法 一.先确定div的基本样式 二.具体实现方法 第一种:利用子绝父相和margin: auto实现 第二种:利用子绝父相和过渡动画tranform实现 第三种: ...

  9. php实现一行省略号,css实现文字溢出省略号的四种方法(附代码)

    本篇文章给大家带来的内容是关于css实现文字溢出省略号的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在项目中有涉及实现一行或者第几行后加省略号,在实现第几行后加 ...

  10. 双飞翼 html 布局,css实现双飞翼布局的四种方法(附代码)

    本篇文章给大家带来的内容是关于css实现双飞翼布局的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 圣杯布局.双飞翼布局效果图 从效果图来看圣杯布局.双飞翼布局效果 ...

最新文章

  1. C++各大有名库的介绍之C++标准库
  2. 【Java】 Base64原理及简单应用
  3. java高并发(十三)并发容器J.U.C--AQS
  4. java自动注入注解_Spring自动注解标签@Autowired不能注入xml配置的bean吗?
  5. python编写程序输入整数n求n_Python入门习题----N=ABXBA
  6. 运行Pangolin时提示错误
  7. Linux驱动编写(块设备驱动代码)
  8. 买了基金之后要天天盯着吗?
  9. Android -- 屏幕适配
  10. 为什么JS中0.1+0.2 != 0.3
  11. 《那些年啊,那些事——一个程序员的奋斗史》——81
  12. 数据结构---堆的相关操作
  13. android中动态壁纸下载,手机动态桌面壁纸(Video live wallpaper)
  14. c语言abs作用是什么意思,c语言中函数abs和fabs有什么区别?
  15. 短期出差北京个人所见所闻所感
  16. 波士顿学院计算机科学专业,波士顿学院计算机专业好吗?_托普仕留学
  17. window10 下载速度限制问题解决方案
  18. html仿今日头条数据列表
  19. OCX打包CAB并签名的过程
  20. Go学习笔记 -- 通道实现协程等待

热门文章

  1. android studio for android learning (二十一 )异步任务AsyncTask加载美女图片攻略及AsyncTask源码详解
  2. POJ 3667 Hotel (线段树区间合并)
  3. HDU1317 —— 最长路+判断正环
  4. 数学分析 复合函数求导法则
  5. 有关深度估计的几篇文章的阅读笔记
  6. 西门子S7系列中间人攻击:流量劫持和转发(一)
  7. JDK ThreadLocal解析
  8. [HZAU]华中农业大学第四届程序设计大赛网络同步赛
  9. PHP的图片等比缩放
  10. SuperWebSocket发布了第一个测试版