微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

Javascript结合css实现网页换肤功能_javascript技巧

php中文网
发布： 2016-05-16 18:42:42
原创
1817人浏览过
Html代码部分:
1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href.

2.皮肤选择按钮(后台为每个li添加onclick事件,触发换肤功能)

  • 灰色

  • 绿色

  • 黄色

  • 蓝色

  • 粉色

  • 紫色


Js部分:
1.换肤方法
//设置cookie,按钮选中状态,页面皮肤
skin.setSkin=function(n){
var skins =("skin").getElementsByTagName("li");
for (i=0;i{
skins[i].className="";//初始化按钮状态
}
skin.setCookie(n);//保存当前样式
("skin_"+n).className="selected";//设置选中皮肤按钮的样式
("cssfile").href="css/main"+n+".css";//设置页面样式
}
2.存取cookie
//将当前皮肤n存到cookie
skin.setCookie=function(n){
var expires=new Date();
expires.setTime(expires.getTime()+24*60*60*365*1000);
var flag="Skin_Cookie="+n;
document.cookie=flag+";expires="+expires.toGMTString();
}
//返回用户设置的皮肤样式
skin.readCookie=function(){
var skin=0;
var mycookie=document.cookie;
var name="Skin_Cookie";
var start1=mycookie.indexOf(name+"=");
if(start1==-1){
skin=0;//如果没有设置则显示默认样式
}
else{
var start=mycookie.indexOf("=",start1)+1;
var end=mycookie.indexOf(";",start);
if(end=-1){
end=mycookie.length;
}
var values= unescape(mycookie.substring(start,end));
if (values!=null)
{
skin=values;
}
}
return skin;
}
3.绑定换肤按钮事件
skin.addEvent=function(){
var skins =("skin").getElementsByTagName("li");
for (i=0;i{
skins[i].onclick=function(){skin.setSkin(this.id.substring(5))};
}
}
4.页面加载完成后设置皮肤样式
window.onload=function(){
skin.setSkin(skin.readCookie());//根据读取cookie返回值设置皮肤样式
skin.addEvent();//绑定按钮事件

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：CSS Filter背景透明提示_页面背景 下一篇：javascript 限制输入脚本大全_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
在Shadow DOM中集成外部CSS框架 ShadowDOM为WebComponents提供了样式隔离机制，这意味着它默认无法直接访问父文档的CSS资源。要在ShadowDOM内部使用如UIKit等外部CSS框架，必须将这些框架的样式表显式地引入到ShadowDOM的内部，通过在ShadowRoot中添加标签来实现，从而确保组件内部样式行为的独立性和可预测性。
2025-11-15 16:31:12
864
Python Web应用中交互式地图与后端业务逻辑的集成指南 本教程旨在解决在PythonWeb应用中集成交互式地图与后端计算逻辑的挑战。我们将探讨为何直接结合folium与基于input()的Python函数难以实现复杂的Web交互，并提供两种主要解决方案：一是利用Streamlit或Gradio等Python-onlyUI框架快速构建原型，二是采用Flask/FastAPI作为后端与JavaScript前端（如Leaflet.js）构建功能完善的Web应用。文章将详细阐述各方案的实现思路、示例代码及关键注意事项，帮助开发者实现地图点击触发后端计算并获取
2025-11-15 16:28:28
872
在Pinia Store中利用TypeScript接口定义状态的实践指南 本文旨在指导开发者如何在PiniaStore中有效地使用TypeScript接口来定义和类型化状态。我们将深入探讨直接使用接口作为状态初始值时可能遇到的常见错误，并提供正确的解决方案，包括如何正确导入类型以及如何为Pinia的state函数指定返回类型，从而实现类型安全和代码一致性。
2025-11-15 16:28:02
918
JavaScript中的函数柯里化与部分应用_javascript函数式编程 柯里化将多参函数转为单参链式调用，如f(a)(b)(c)；部分应用则预设部分参数生成新函数，如f.bind(null,a,b)。前者延迟执行直至参数齐全，后者立即执行剩余参数。两者均提升函数复用性，但柯里化更适逻辑拆分，部分应用便于配置简化。实际用于日志、事件处理等场景。
2025-11-15 16:27:39
900
JavaScript中正确获取并处理API返回的二进制数据（如ZIP文件）教程 本教程详细阐述了在JavaScript中使用fetchAPI从后端获取二进制数据（如ZIP文件）的正确方法。针对常见的response.text()无法正确解析二进制内容的困境，文章重点介绍了如何利用response.arrayBuffer()获取原始字节数据，并提供了将ArrayBuffer转换为Base64字符串的实用函数及完整的API调用示例，确保数据能够被正确接收和处理。
2025-11-15 16:12:21
694
Node.js中基于Multer和MongoDB实现图片上传的完整教程 本教程详细介绍了如何在Node.jsExpress应用中实现图片上传功能，结合Multer处理文件上传并将其路径存储到MongoDB数据库。文章涵盖了前端表单设置、Multer配置、后端路由集成以及Mongoose模型定义，重点强调了Multer中间件的正确使用方式，确保图片文件能被正确处理并其存储路径成功持久化到数据库，从而解决图片上传后数据库字段未更新的常见问题。
2025-11-15 16:08:15
718
Node.js 中使用 Multer 和 MongoDB 实现图片上传与管理 本教程详细介绍了如何在Node.jsExpress应用中利用Multer中间件处理图片上传，并将上传后的图片路径存储到MongoDB数据库。文章将通过具体的代码示例，演示Multer的配置、表单处理以及如何确保文件信息正确地保存至数据库，解决常见的req.file.mv错误，确保图片上传流程的完整性与数据持久化。
2025-11-15 15:59:02
903
在 amCharts 5 中自定义主按钮（primaryButton）颜色 本教程详细介绍了如何在amCharts5中自定义主按钮（如缩放按钮）的颜色。不同于常规主题规则，amCharts5提供root.interfaceColors属性来精准控制界面元素的视觉样式。通过设置primaryButton和primaryButtonHover，开发者可以轻松实现按钮的常态和悬停颜色定制，确保图表界面与整体设计风格保持一致。
2025-11-15 15:58:01
1001
解决天气小部件图标尺寸问题的CSS精确控制指南 本文详细阐述了在前端开发中，特别是天气小部件这类动态内容场景下，如何精确调整图标尺寸。核心在于理解CSS层叠规则和选择器优先级，避免将样式错误地应用于父容器而非实际的元素。通过直接定位子元素，并结合object-fit属性，可以有效解决图标显示不正确的问题，确保UI的视觉一致性。
2025-11-15 15:41:21
479
解决Html5Qrcode扫描器在表单提交后无法自动重启的问题 本文深入探讨了Html5Qrcode扫描器在WordPress插件中，表单提交后无法自动重启的问题。核心原因在于扫描器实例的错误管理和生命周期处理。教程将提供详细的解决方案，包括正确初始化和重用扫描器实例、优化扫描流程中的停止与启动逻辑，并提供一个完整的重构代码示例，确保扫描器在AJAX成功回调后能够稳定、自动地重新启动，从而提升用户体验和系统效率。
2025-11-15 15:41:00
906
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部