JavaScript+Css+Html实现网页换皮肤功能

描述：JavaScript+Css+Html实现网页换皮肤功能

原理：使用不同网页背景保存在不同CSS里面，当点击切换的时候通过JavaScript将原来的样式表改为新的CSS就可以完成换肤功能

代码实现：

1.HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>网页换肤</title><!-- 连接到初始背景为蓝色样式表 --><!-- JavaScriptl需要通过id来操作link标签 --><link id="background" rel="stylesheet" href="gray.css"><script src="script.js"></script>
</head>
<body><!-- #代表不跳转 onclick为鼠标单击事件 xxx()代表调用的JavaScript函数 --><a href="#" οnclick="change('orange')">[橙色地带]</a><a href="#" οnclick="change('green')">[绿色背景]</a><a href="#" οnclick="change('gray')">[灰色空间]</a>
</body>
</html>

2.CSS代码（网页背景1）

body{/* 将背景颜色换为灰色 */background-color: gray;
}

3.CSS代码（网页背景2）

body{/* 将背景颜色换为绿色 */background-color: green;
}

4.CSS代码（网页背景3）

body{/* 将背景颜色换为橙色 */background-color: orange;
}

4.JavaScript代码

function change(type) {if (type == "orange") {document.getElementById("background").href = "orange.css";}else if (type == "green") {document.getElementById("background").href = "green.css";}else if (type == "gray") {document.getElementById("background").href = "gray.css";}
}

JavaScript+Css+Html实现网页换皮肤功能相关推荐

JavaScript + CSS/CSS3 + HTML 网页登陆 + 注册界面设计
登陆界面设计撸代码之前先来看一看效果图: 登陆界面由一个简单的表单(头像.用户名.密码.登陆按钮.记住我.取消.忘记密码),创建了一个CSS3的缩放效果构成.需要做浏览器(Firefox.Safar ...
微信皮肤css,微信小程序实现皮肤功能（夜间模式）
老规矩,先上效果图个人对夜间模式这个功能情有独钟晚上黑灯瞎火的看手机,屏幕亮度就算调到最低依然很是刺眼呀所以我一直用某浏览器,因为有夜间模式言归正传,依然是分析功能点 1.点击按钮,切换一套c ...
微信皮肤css,微信小程序实现皮肤功能（夜间模式）_婳祎_前端开发者
老规矩,先上效果图个人对夜间模式这个功能情有独钟晚上黑灯瞎火的看手机,屏幕亮度就算调到最低依然很是刺眼呀所以我一直用某浏览器,因为有夜间模式言归正传,依然是分析功能点 1.点击按钮,切换一套 ...
uniapp换皮肤功能demo
不支持scss的需要提前安装:https://www.runoob.com/sass/sass-install.html 全代码下载地址 1.新建一个uni-app的默认模板 2.构建如下图的项目目录 ...
点击按钮给网页换皮肤简单js实现
其实这个功能实现起来很简单,使用js点击按钮时更换标签中href属性值, 参考代码如下, //导入外部样式表你再点一下试试!//按钮 var hello = document.getElementB ...
Vue + Less + Css变量实现热换肤功能
一.首先安装样式处理插件及less yarn add style-resources-loader -D yarn add vue-cli-plugin-style-resources-loader ...
vue实战-实现换主题/皮肤功能
现在的app和pc网站做的越来越花哨,但是有时候用户并不喜欢你给他挑选好的主题颜色,这个时候就需要一个换皮肤的功能了. 那么我们怎么在vue中实现这个换皮肤的功能呢? 实现思路我们用vue一般都是写 ...
java怎样实现换肤功能_JavaScript实现换肤功能
一,js换肤的基本原理基本原理很简单,就是使用 JS 切换对应的 CSS 样式表文件.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 ...
用SkinMagic工具包创建换皮肤程序
<script type="text/javascript"> </script> <script src="http://pagead2. ...

JavaScript+Css+Html实现网页换皮肤功能

JavaScript+Css+Html实现网页换皮肤功能相关推荐

最新文章

热门文章