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

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

 我来答

2个回答

#热议# 在购买新能源车时，要注意哪些？

匿名用户
2013-05-21

展开全部

用mousover,mouson的属性设置，这样就应该行了

已赞过 已踩过<

评论收起

AiPPT
2024-09-19 广告

随着AI技术的飞速发展，如今市面上涌现了许多实用易操作的AI生成工具1、简介：AiPPT: 这款AI工具智能理解用户输入的主题，提供“AI智能生成”和“导入本地大纲”的选项，生成的PPT内容丰富多样，可自由编辑和添加元素，图表类型包括柱状图... 点击进入详情页

本回答由AiPPT提供

匿名用户
2013-05-21

展开全部

给你个我当时搜集的资料 第一种:实现多风格选择的方法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样式。


本回答被网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

1条折叠回答

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

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

其他类似问题

为你推荐：