动态CSS，换肤技术在选择了某样式后，再次打开该页面时，将仍然保持该样式

最新推荐文章于 2021-06-02 20:34:47 发布
最新推荐文章于 2021-06-02 20:34:47 发布
阅读量1k 收藏 1
点赞数
分类专栏： 网站建设 文章标签： css null domain stylesheet javascript function
<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
常见的例子就是：一个站点上有多个页面样式提供浏览者选择。

同时，在选择了某样式后，再次打开该页面时，将仍然保持该样式。

自然会想到了Cookie技术

下面是HTML代码部分（另外再加需要的CSS文件就可以使用了）：

<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=# ο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>
</BODY>
</HTML>

piperzero
关注
专栏目录
关于动态换肤的解决方案
StarFishing
07-18 1430
关于动态换肤的解决方案 最近在学习electron，希望在页面切换的时候动态更换背景色，也是参考了一个知名软件的效果，让我手痒起来，也想实现以下，之前在用element开发的时候接触到过换肤的一些思路，但是当时并没有这块的需求，也就搁置了，下面个跟大家探讨以下我的两种思路。 效果图 方式一 动态增加link标签 所谓动态增加link标签就是在需要换肤的时候，把需要更改的颜色进行关键字替换，把新生成...
动态CSS，换肤技术
01-01
见的例子就是：一个站点上有多个页面样式提供浏览者选择。 同时，在选择了某样式后，再次打开该页面时，将仍然保持该样式。 自然会想到了Cookie技术  以下是程序代码： <HTML> <HEAD> <link ID=”skin” rel=”stylesheet” type=”text/css”> <TITLE>换肤技术</TITLE> [removed] <!– function SetCookie(name,value){      var argv=SetCookie.arguments;      var argc=SetCookie.argument
跳转到新页面后上次点击时的样式依然保留
c1552182083的博客
09-29 3130
$('ul.main-menu li a').each(function(){     if($($(this))[0].href==String(window.location))         $(this).parent().addClass('active'); }); 使用方法：将上面的jquery-1.9.1.min.js文件和script代码引入到页面中，然后将$后面括
html中跨页面保持状态,使用HTML5 localstorage在页面刷新时保留jQuery切换状态
weixin_39942108的博客
06-02 273
我刚刚了解了HTML5“localstorage”功能.我一直在尝试与jQuery切换一起实现它,以便在刷新页面时使div保持在最新状态.这似乎是一个很好的cookie替代品！我在理解如何以这种方式实现它时遇到了很多麻烦.这是我到目前为止所尝试的：HTML：Click MeCSS：#container {width:200px; height:220px;}#foo {display:block;...
Android 动态换肤框架原理
dreams_deng的博客
05-24 2055
1. Android 系统PhoneWindow 源码阅读 1.1. Activity实例化 PhoneWindow Activity: final void attach(Context context, ActivityThread aThread, Instrumentation instr, IBinder token, int ident, Application application, Intent intent, A...
javascript实现动态CSS换肤技术的脚本
10-30
### JavaScript 实现动态 CSS 换肤技术的脚本解析 #### 一、概述 在网页设计中，为用户提供多种风格的主题切换功能是一项常见的需求。通过动态改变网站的主题颜色或布局，可以提升用户体验，使用户可以根据自己的...
js动态修改整个页面样式达到换肤效果
10-25
4. 当用户做出选择时，JavaScript动态更改页面中链接到的CSS文件的引用路径，从而加载对应的样式表。 #### 关键代码解析 - 页面结构定义：页面首先定义了基本的HTML结构，包括一个提示用户换肤的`<span>`标签和一...
web 本地存储 localStorage 关闭浏览器保留背景颜色案例
前端一线搬运工的博客
05-26 1032
详细讲解看mj的博客&gt;&gt;&gt;点击打开链接web 本地存储 （localStorage、sessionStorage）区别:对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStoragesessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期...
使用CSS3自定义属性实现换肤功能
待花开花谢的博客
07-19 2305
开始之前先说说css3的自定义属性，之前我们在写css的时候全部都是使用自身属性，比如margin,padding等。但是你曾是否见过这样的css :root{ --primary-color:#989898; --light:#fff; --dark:#000; } 其中的–primary-color、–light、–dark就是自定义的属性。 自定义属性的命...
css文件修改后，网页样式不变
风之云的博客
08-16 1万+
今天碰到了如题的情况，解决办法很简单， case1:   直接快捷键ctrl+F5，清除浏览器网页缓存cache就okay啦。   case2:   最近又发现另外一种错误会导致刷新不成功问题，就是个人在css中定义的类，最开始的点输入不正确，不是点与句号的区别，而是全角点与半角点的区别。 .．．．．．．．．．．．．．．．．．．．．．．．．．．//全角点 .................
Eclipse中写jsp文件，引用bootstrap的CSS和js库，没有反应\作用\效果，解决办法
热门推荐
immense的博客
05-26 1万+
首先，我新建了一个Project，写了一些代码，jsp页面可以运行 然后打算引入bootstrap，美化一下页面，把之前在html文件中可以显示的代码按照位置复制进来，发现文字显示了，但是样式没有显示= = 后来弄了半天查了很多资料： 比如： http://blog.csdn.net/u012814005/article/details/42125897 需要注意的地方是：
javascript实现动态CSS换肤技术的脚本.docx
01-13
动态CSS换肤技术是一种常见的前端技术，主要用于在不重新加载页面的情况下更改网站的主题或样式。这不仅提升了用户体验，还增强了网站的个性化功能。本文将从JavaScript实现动态CSS换肤的核心原理出发，详细介绍其...
登录页面的css样式
zh_flowers的博客
05-09 3086
form 表单 .form{ width:284px; height:264px; background-color:#fff; padding:18px; } .form>p{ height:50px; font-size:16px; } .form strong{
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值