原生html切换皮肤

最新推荐文章于 2024-03-01 15:59:57 发布

YD_1989

最新推荐文章于 2024-03-01 15:59:57 发布

阅读量269

点赞数

分类专栏：前端基础文章标签： html css css3

原文链接：https://www.cnblogs.com/subendong/p/15321395.html

版权

前端基础专栏收录该内容

23 篇文章 1 订阅

订阅专栏

该博客展示了如何使用JavaScript动态更改HTML页面的CSS链接，从而实现不同颜色主题的切换。通过创建三个按钮，用户可以选择绿色、红色或默认的颜色主题，对应的CSS文件将被加载，改变页面上`.divColor`和`.btnColor`元素的背景颜色。

摘要由CSDN通过智能技术生成

原理：

1.每个皮肤对应一个css文件，好维护

2.通过js动态更改标签的href属性

程序代码如下：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="referrer" content="always"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link id="test" rel="Stylesheet" type="text/css" href="default.css"/>
</head>
<body>
<div class="divColor"></div>
<br/>
<input type="button" value="按钮颜色" class="btnColor"/><br/><br/>

<input type="button" value="绿色" onclick="setColor('green')"/>
<input type="button" value="红色" onclick="setColor('red')"/>
<input type="button" value="默认" onclick="setColor('default')"/>
<script>
    function setColor(color) {
        document.getElementById("test").setAttribute("href", color + ".css")
    }
</script>

</body>
</html>

默认default.css

.divColor{
    background-color:#ccc;
    width:200px;
    height:200px;
}

.btnColor{
    background-color:#ccc;
    border-color:#ccc;
    color:#333;
}

红色背景red.css

.divColor{
    background-color:#f00;
    width:200px;
    height:200px;
}

.btnColor{
    background-color:#f00;
    border-color:#f00;
    color:#fff;
}

绿色背景green.css

.divColor{
    background-color:#0f0;
    width:200px;
    height:200px;
}

.btnColor{
    background-color:#0f0;
    border-color:#0f0;
    color:#fff;
}