在HTML中。怎么样才能实现换肤的功能？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在HTML中。怎么样才能实现换肤的功能？相关的知识，希望对你有一定的参考价值。

比如说就是这样的样子。可以点换肤的时候有个框框出来。出现几个颜色。然后选什么就是什么颜色。。我知道要写好几个CSS。然后就是不会连接

参考技术A 用mousover,mouson的属性设置，这样就应该行了 参考技术B 给你个我当时搜集的资料 第一种:实现多风格选择的方法CSS代码：

<LINK id=Mrkyle href="/css/skin1.css" type=text/css rel=stylesheet>
<LINK id=Mrkyle href="/css/skin2.css" type=text/css rel=stylesheet>
<LINK id=Mrkyle href="/css/skin3.css" type=text/css rel=stylesheet>HTM代码：

<SPAN class=skin>
<A onclick="document.all.Mrkyle.href='/css/skin1.css'" href="#">蓝色</A>
<A onclick="document.all.Mrkyle.href='/css/skin2.css'" href="#">黄色</A>
<A onclick="document.all.Mrkyle.href='/css/skin3.css'" href="#">红色</A>
</SPAN>第二种:实现多风格选择的方法<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<link rel="alternate stylesheet" href="/red.css" type="text/css" title="red" media="screen, projection"/>
<link rel="stylesheet" href="/green.css" type="text/css" title="green" media="screen, projection"/>
<link rel="alternate stylesheet" href="/yellow.css" type="text/css" title="yellow" media="screen, projection"/>
<script language="javascript">function setActiveStyleSheet(title)
var i, a, main;
if (title)
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;
</script>
</HEAD><BODY>
<a href="javascript :void()" onClick="setActiveStyleSheet('red'); return false;" title="红色样式">红色样式</a>
<a href="javascript :void()" onClick="setActiveStyleSheet('green'); return false;" title="绿色样式">绿色样式</a>
<a href="javascript :void()" onClick="setActiveStyleSheet('yellow'); return false;" title="黄色样式">黄色样式</a>
<a href="javascript :void()" onClick="setActiveStyleSheet('none'); return false;" title="没有样式">没有样式</a>
</BODY>
</HTML>第三种:实现多风格选择的方法1. /styleswitcher.js
function setActiveStyleSheet(title)
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 = "";
document.cookie = name+"="+value+expires+"; path=/";
function readCookie(name)
var nameEQ = name + "=";
var ca = document.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);2、CSS调用：<link rel="stylesheet" type="text/css" href="/default.css" /> //默认的样式这样调用
<link rel="stylesheet" type="text/css" href="/one.css" title="name_one" /> //其他的样式这样调用
<link rel="stylesheet" type="text/css" href="/two.css" title="name_two" />
...
3、JS调用：<script type="text/javascript" src="/styleswitcher.js"></script>4、风格选择的实现：
写在页面的body中
<a href="#"
onclick="setActiveStyleSheet('',1);
return false;">默认样式</a>
<a href="#"
onclick="setActiveStyleSheet('name_one',1);
return false;">样式一</a>
<a href="#"
onclick="setActiveStyleSheet('name_two',1);
return false;">样式二</a>第四种:下拉表单和点击链接实现多风格选择的方法<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>请选择下面的下拉菜单测试换肤效果
<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>
<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> 第一种用的是普通链接，相对简单，后三种都是javascript控制的，相对来说也不错。目前也就这几种。在a标记内放置图片即可进行点击图片切换css样式。

为（iphone）应用程序换肤的良好设计模式是啥？

【中文标题】为（iphone）应用程序换肤的良好设计模式是啥？【英文标题】：What is a good design pattern for skinning an (iphone) app?为（iphone）应用程序换肤的良好设计模式是什么？ 【发布时间】：2011-06-24 13:53:09 【问题描述】：

在 XIB 中构建我所有漂亮的按钮和东西的道路还很遥远，我突然意识到人们会为质量较低的笔记本电脑多付 200 美元，“因为它是粉红色的！”但我离题了。

我需要以某种方式集中控制我的应用的配色方案，并即时更改颜色。我有几个想法，比如可能是一个单例“主题”对象，其中包含一些包含主题颜色和字体的 kvo 兼容属性，然后让视图控制器“监听”更改，并在主题更改时重新绘制所有内容。

到目前为止的问题：我需要一个指向每个 UI 对象的指针，包括表格视图单元格之类的东西——这似乎很痛苦。另一种可能性是将我所有的主题 UI 对象子类化，也许让它们自己注册为观察者，但这让我想知道这样做所需的开销，也许 KVO 甚至不是这里的方法，我不知道不知道。

所以我想知道是否有人可以分享他们过去所做的事情，哪些有效，哪些会导致大问题？

谢谢！

更新

我最终使用了一个名为 SkinDispatcher 的单例对象，它只包含许多旨在由 UIView 子类观察的属性。然后我创建了 UILabel、UIButton、UITextField 以及我碰巧使用的任何其他东西的快速而肮脏的子类。

这些子类每个都在 awakeFromNib 中查找它们的标签号并使用它来注册对适用字体和颜色的更改。

接下来我创建了一个专门用于加载样式的类，它实际上打开了一个 plist 文件，其中包含保存字体名称和 R|G|B|A 颜色的键，读取它们并将它们设置为 SkinDispatcher 中的适用属性，由键名确定。最后一步（尚未尝试）是在 StandardUserDefaults 键上为皮肤设置一个观察者，为该想法的回答者提供道具。

【问题讨论】：

我认为 iOS 5 对此做了一些改进。你看过还是需要更多？ 是的，iOS 5 允许更轻松地自定义 UIKit 对象，我想知道更多关于实时重新皮肤以及如何从用户的按钮按下到屏幕上的控件获取有关使用什么颜色的信息. iOS 5 仍处于保密协议下，因此您无权在此讨论。 谁编辑了我的评论？如果我没有打错大字或其他什么，我宁愿你发表新评论也不要编辑我的。 @Alex Gosselin：这是肯定的。 :-p 【参考方案1】：

您已经提到了一种可能的方法，即使用 KVO。另一种可能性是注册一个特定的通知，并在通知到达您的视图控制器时做出相应的反应。

【讨论】：

以上是关于在HTML中。怎么样才能实现换肤的功能？的主要内容，如果未能解决你的问题，请参考以下文章

Android主题切换（Theme）实现日夜间功能

Android主题切换（Theme）实现日夜间功能

C#winform换肤问题：自己写了一个换肤的基类（SkinForm）是从Form继承的，如何能把所有的Form换成新的皮肤

Android实现apk插件方式换肤

Android一键换肤原理简述

Android一键换肤原理简述