导航:首页 > 编程语言 > jscss切换样式表实现网页换肤

jscss切换样式表实现网页换肤

发布时间:2025-04-24 06:23:09

『壹』 jsp页面如何实现整体换肤

给个皮肤编号,选择下来框的时候每个option的值对应到皮肤编号,登录过后根据上传过来的值反显皮肤,如果用户登录的时候需要记录上一次确定过的皮肤,就将皮肤编号存到数据库

『贰』 求一个CSS代码 可以改字体颜色 背景图片 把标题栏弄透明的 谢谢了~

你指的是网页换皮肤吧。

从网上下载一个jquery 库 jquery-1.9.0.min.js 不一定是1.9的,可以是1.2至1.9都行

新建两个不同名称文件夹,存放两个样式表和图片。如:color1 和color2

两个样式表的样式名要完全一样,大部分样式一模一样,图片名称和存放地址也一样,不一样的是图片不一样,字体颜色样式不一样。

两个样式存放地址分别:color1/css/index.css和color2/css/index.css

index.html 和color1、color2 为同一目录的文件

看下面的代码你应该能明白。


样式文件color1

.color_style{width:300px;height:30px;line-height:30px;font-size:20px;font-weight:bold;background:url(color1/image/img.gif)no-repeat;color:#fff;background-color:#999;}

样式文件color2

.color_style{width:300px;height:30px;line-height:30px;font-size:20px;font-weight:bold;background:url(color2/image/img.gif)no-repeat;color:#ff00ff;background-color:#9C3;}
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>换肤</title>
<linkhref="color1/css/index.css"rel="stylesheet"type="text/css"id="color_style"/>
<scriptsrc="js/jquery-1.9.0.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
functionchange_color(){
varhref1='color1/css/index.css';
varhref2='color2/css/index.css';
varlink_url=$("#color_style").attr("href");
if(link_url==href1){
$("#color_style").attr("href",href2);
}else{
$("#color_style").attr("href",href1);
}
}
$("#change").bind("click",change_color);
});
</script>
</head>
<body>
<divclass="color_style"><spanstyle="float:left;">这是效果标题</span><spanstyle="float:right;cursor:pointer;"id="change">点击换肤</span></div>
</body>
</html>

『叁』 如何用js改变多个框架的css,也就是让网页整体换肤

<linkhref="css/color1.css"id="color"rel="stylesheet"type="text/css"/><!--注意这行的id-->
<aonclick="changeStyle(1)">样式1</a>
<aonclick="changeStyle(2)">样式2</a>


上面是html,下面是js.把选定的样式加载进cookies ,网页加载先查cookie。


functiongetObject(elementId){//获取指定id的object
if(document.getElementByIdx){returndocument.getElementByIdx(elementId);}
elseif(document.all){returndocument.all[elementId];}
elseif(document.layers){returndocument.layers[elementId];}
}
functionchangeStyle(id){//切换样式
varstylesheet=getObject("color").href="css/color"+id+".css";
document.cookie="stylesheet="+escape(stylesheet);//写入Cookie
//alert(document.cookie);
//alert(stylesheet);
}
functioninitStyle(){//初始化样式,如果cookie存在样式,则加载cookie样式,否则加载默认样式
if(/stylesheet=([^;]+)/.test(document.cookie))//判断是否存在cookie.
getObject("color").href=unescape(RegExp.$1);
//alert(/stylesheet=([^;]+)/.test(document.cookie));
}initStyle();
阅读全文

与jscss切换样式表实现网页换肤相关的资料

热点内容
java字面值的存储 浏览:261
nodejs创建文件夹错误 浏览:484
c语言编程为什么关闭了 浏览:245
相册的数据清理了怎么恢复 浏览:775
微信文件管理换路径了以前聊天记录没有 浏览:310
java字符串截取最后两位 浏览:377
少儿编程和无人机编程哪个好 浏览:383
ensp配置文件怎么导出 浏览:939
52好压右键没有压缩文件选项 浏览:98
avi什么类型的文件格式 浏览:418
分区表与文件系统 浏览:786
获得文件夹路径的对话框 浏览:179
弟子规哪个版本的好 浏览:423
二手苹果6p的价格 浏览:111
微信公众号版头设计 浏览:917
jdk18读取配置文件 浏览:72
优化关键字挖掘工具 浏览:672
markdown代码块语法 浏览:249
arcgis面文件属性 浏览:43
当数据都带有标准差如何计算 浏览:936

友情链接