网页常见的换肤技术

最新推荐文章于 2022-11-05 15:24:19 发布
最新推荐文章于 2022-11-05 15:24:19 发布
阅读量1.5k 收藏 3
点赞数
分类专栏： 前端学习笔记
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/diandianxiyu_geek/article/details/16961951
版权



　　常见的例子就是：一个站点上有多个页面样式提供浏览者选择。 
同时，在选择了某样式后，再次打开该页面时，将仍然保持该样式。 
自然会想到了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=(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=# >css.css</a> 
//        
//         <a href=# >css1.css</a> 
//        
//         <a href=# >css2.css</a> 
//        
//         <a href=# >css3.css</a> 
//        
//         <br> 
//        
//         <select > 
//        
//         <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>

小雨青年
关注
专栏目录
网页换肤的原理 简单 实用
11-16
一个案例，很好的讲解了网页换肤的原理！ 一看即懂！
JS实现网页换肤功能效果
weixin_34194379的博客
12-25 807
 网页换肤的基本原理   使用 JS 切换对应的 CSS 样式表。例如hao123首页的右上方就有网页换肤功能。除了切换 CSS 样式表文件之外，通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤，这样下次用户访问的时候，就可以自动使用上次用户配置的选项。   基本流程如下：                                 上面是使用流程图来描述下，自从工...
网页换肤原理
08-12 142
首先准备需要多写几套皮肤，也就CSS样式，然后每次点击换肤时，将整个网页的CSS样式换成另一种样式，网页换肤，原理就这么简单 <script type="text/javascript"> window.onload = function() { document.getElementsByTagName("input")[1].oncl...
简单实现网页换肤功能
weixin_30695195的博客
04-07 345
我发现网上写换肤功能写的有点长，就想想如何更简单方法实现这个功能，于是我自己写了一个。 html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <lin...
select学习小demo--实现网页换肤
weixin_34309543的博客
04-11 98
一，简单版<body> <header> <imgsrc="img/2.jpg"alt=""style="width:200px;height:60px;float:left;"> <selectid="btn"> <optionvalue="">请选择</option&gt...
js实现简单的网页换肤效果
10-20
JavaScript 实现网页换肤是一种常见的用户体验优化技术，它允许用户根据个人喜好选择不同的主题或颜色方案，提升网站的个性化和互动性。以下是基于标题和描述的详细知识点解析： 1. **网页换肤原理**： 网页换肤的...
js+css简单实现网页换肤效果
10-23
本文所探讨的技术方案是通过结合JavaScript和CSS实现网页换肤效果的方法。下面将详细讲解这一功能的实现原理和步骤。 ### 网页换肤机制分析 网页换肤功能的核心是改变网页的样式表（CSS），即当用户选择不同的皮肤...
Javascript结合css实现网页换肤功能
10-29
网页换肤功能的实现是现代网站个性化服务的一部分，它允许用户根据自己的喜好改变网站的整体视觉风格。实现该功能通常需要前端技术...随着用户对网站个性化需求的增长，网页换肤功能成为了现代网站设计的常见特性之一。
网页换肤JS
07-25
网页换肤JS是一种常见的前端技术，它允许用户在不刷新页面的情况下改变网站的外观和感觉，为用户提供个性化的浏览体验。这项技术主要依赖JavaScript（JS）脚本语言，结合HTML、CSS以及可能的图片资源来实现。下面...
jQuery实现简单的网页换肤效果示例
10-21
网页换肤是网页设计中一项常见的功能，可以允许用户通过选择不同的皮肤（样式表）来改变页面的外观，从而提升用户体验。本示例涉及到的关键知识点包括： 1. jQuery基础：jQuery是一个快速、小巧且功能丰富的...
追梦智能换肤模块
12-15
追梦智能换肤模块
最简单的网页换肤(jQuery)
weixin_34245749的博客
11-07 129
以下讲述中有4个文件：skin.html、blue.css、green.html、red.html，我都放在同一目录下。 1、skin.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3...
网页前端 网页换肤（js）
bruscar的专栏
07-18 2126
网页换肤原理：需要准备不同的肤色的ｃｓｓ的样式表， 涉及到： 点击事件（onclick） id属性，所有的都可以有id属性。 所以：要求准备： 1、需要哪些样式，点击之后会改变href 2、需要的属性添加事件，切换js fucntion 是函数的关键字 ·js中的函数赋值：可以匿名函数和之间赋值函数window.onload() 这个是加载网页的方法，我们是可以通过写这个方法，才会
比antd-mobile体验更佳的Zarm2.0组件库来了，2020从此你多了一个选择
Js中文网 - www.javascriptc.com
03-30 928
Zarm目前开源了50个组件，基本覆盖常见的通用组件、样式命名采用了BEM的规范，内部实现使用了Css Variables + SCSS Mixins，这使得样式维护的工作变得优雅简洁、扩展性好，我们提供了内置的基础组件，可以方便地基于现有组件实现二次开发，响应及时，目前在内部开源的情况下，已有接近3000次的commit，在及时响应issue的同时，我们也保持着快速的迭代。后续也会有官方讨论群，只要有问题，我们一定及时跟进，不会让问题石沉大海
Axure RP 9 新特性界面暗黑模式主题、风格、皮肤设置
最新发布
colin5210的博客
11-05 4091
Axure默认的主题风格为明亮模式，也就是背景色为白色，Axure RP 9 版本加入了时下最流行的新特性，可以像Sketch一样设置为暗黑模式，也可以称之为夜间模式，护眼模式，在较暗的环境下，不至于特别的刺眼，不妨可以试试。2、弹出偏好设置后，在【外观】下拉处，选择【黑暗模式】 (black mode)，点完成即可。1、文件 --> Preferences(F9)（汉化：偏好设置）操作步骤如下：(windows)
界面换肤技术
锄禾日当午
12-12 1557
各种流行的界面换肤控件库比较 用VC做程序的时候，如果对界面样式不满意怎么办？自己从各种控件基类继承，然后自绘么？对高手来说，这虽然不能算是难题，但是仍旧比较麻烦，对新手来说，连看什么书都不好说。那就没有更好的方法么？当然有！这就要用到一类称作“界面换肤”的工具包了。 且看这些工具包有什么作用。当你使用一个界面换肤工具包的后，在不改变代码的基础上（除了使用库函数），你的程序将变成另外一
HTML中如何实现更换网页皮肤
zxp180的博客
03-15 7568
 HTML中如何实现更换网页皮肤标签： html javascript2017年10月22日 22:02:29191人阅读 评论(0) 收藏 举报 分类：JavaScript（31）  HTML（15） 版权声明：本文为博主原创文章，若需转载，请注明出处：http://blog.csdn.net/suwu150 http://blog.csdn.net/suwu150/article/detail...
网页换肤的N种方案
lingxiaoxi_ling的博客
04-29 2740
原文demo链接地址 网页换肤的N种方案 最近在做网站换肤的需求，也就是主题切换。那么如何切换主题的颜色呢？以下是网站换肤的实现以及基于换肤拓展的一些方案分享给大家，希望大家在做类似需求的时候能够有些参考。 覆盖样式实现 // light $color-brand1: #ffcd32; $fill-1: #fff !default; $color-text: #3c3c3c; $c...
Axure简介
sunshine_0880的博客
05-05 6400
一、介绍    功能：用于制作快速原型的软件。也可以绘制中保真原型草图。    应用人群：产品经理、交互设计师、UI设计师、网页设计师。    原型分类：低保真（手绘草图）、中保真（使用相关软件绘制出来的）、高保真（包含效果图及原型交互）    二、基本操作    元件的使用：在RP中使用软件需要选择后拖拽到工作区使用即可。    1. 矩形                ① 拖拽矩形左上角的三角...
Android换肤技术探索与实现
“本文主要探讨了Android应用程序中换肤功能的实现方法，包括墨迹天气、手机QQ以及作者自己的实现方式。研究重点在于如何在不降低效率的前提下，灵活地更换应用的界面风格。” 在Android开发中，换肤功能是提高用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小雨青年

程序员可以把咖啡转化成代码~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值