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

叁歲伎倆 2022-05-28 10:56 163阅读 0赞

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

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

代码实现：

1.HTML代码

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>网页换肤</title>
    
        
        
        <link id="background" rel="stylesheet" href="gray.css">
        <script src="script.js"></script>
    </head>
    <body>
    
        
        <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";
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读

相关给Swagger换个新皮肤

> ❝ > > knife4j是springfox-swagger的增强UI实现，为Java开发者在使用Swagger的时候，提供了简洁、强大的接口文档体验。 > >

蔚落/ 2023年03月01日 09:05/ 0 赞/ 38 阅读

相关 vue+iview+less 实现换肤功能

vue+iview+less 实现换肤功能项目搭建用的vue—cli，css框架选择的iview 1、首先安装less支持 `npm install --save-

迈不过友情╰/ 2023年01月11日 14:29/ 0 赞/ 152 阅读

相关【VUE系列】实现随机换一换功能

如图所示，需要实现点击换一换,随机切换列表 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

以你之姓@/ 2022年10月17日 13:48/ 0 赞/ 142 阅读

相关安卓换肤功能实现

Hi,大家好，快元旦啦，提前祝大家元旦快乐，(\^\_\_^\) 嘻嘻，今天给大家分享的是Apad Qzone换肤功能的实现，我们首先看下效果: ![0_1325249978

比眉伴天荒/ 2022年08月23日 11:52/ 0 赞/ 200 阅读

相关 javaScript实现网页表格打印功能

一、首先，新建一个html文件，在html中导入js文件，如下： <script language="javascript" src="LodopFuncs

痛定思痛。/ 2022年07月13日 03:25/ 0 赞/ 424 阅读

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

描述：JavaScript+Css+Html实现网页换皮肤功能原理：使用不同网页背景保存在不同CSS里面，当点击切换的时候通过JavaScript将原来的样式表改为新的CS

叁歲伎倆/ 2022年05月28日 10:56/ 0 赞/ 164 阅读

相关 Android实现风蓝记事本（7）：换皮肤功能

Android实现风蓝记事本（7）：换皮肤功能思路：用一个网格布局存放图片数组，当点击某张图片时，就把背景换成该图片，用SharedPreferences sp存储数据，

我就是我/ 2022年05月24日 04:24/ 0 赞/ 305 阅读

相关 xwiki功能-皮肤

一个皮肤是一个可视化可以修改内容的wiki页面。它与可以修改皮肤各部分颜色的[Color Themes][]不同。 XWiki企业版皮肤 XWiki企业最新版本默认捆绑

今天药忘吃喽~/ 2022年05月24日 01:59/ 0 赞/ 192 阅读

相关实现系统滚动条换肤功能

[http://blog.sina.com.cn/s/blog\_4c3538470100gews.html][http_blog.sina.com.cn_s_blog_4c3

小咪咪/ 2022年05月22日 06:27/ 0 赞/ 147 阅读

相关 Eclipse 换主题、皮肤、配色，换黑色主题护眼

Eclipse写android代码时，默认的文本和框架都是白色，长时间使用，显得过于刺眼。这里介绍三种方法换黑色护眼配色。 1、系统设置里更改 2、从Eclipse Mar

待我称王封你为后i/ 2021年10月12日 17:14/ 0 赞/ 437 阅读