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

叁歲伎倆 2022-05-28 10:56 237阅读 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 条评论，237人围观）

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

相关阅读

相关 JavaScript实现网页拍照功能

随着现代浏览器的发展，JavaScript提供了许多强大的API，使得在网页上实现拍照功能变得相对简单。在本文中，我将详细介绍如何使用JavaScript编程实现网页拍照功能，

缺乏、安全感/ 2024年02月24日 08:11/ 0 赞/ 54 阅读

相关 html下拉列表+网页更换背景实现的换肤功能

利用之前做的登陆页面：[用html实现一个静态登陆页面-可根据需求更改样式][html_-] 一、准备按钮图标和背景图片按钮图标我们去[inconfont][]上找一

Love The Way You Lie/ 2023年10月03日 22:36/ 0 赞/ 2 阅读

相关给Swagger换个新皮肤

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

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

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

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

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

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

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

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

相关安卓换肤功能实现

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

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

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

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

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

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

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

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

相关 xwiki功能-皮肤

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

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

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

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

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