JavaScript网页设计案例-JavaScript实现换肤效果

本文链接：https://blog.youkuaiyun.com/michael_jovi/article/details/145246708

实现网页换肤效果是一个常见的需求，它可以让用户根据自己的喜好选择网页的外观主题。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换肤效果示例</title>
    <link rel="stylesheet" href="styles/default.css">
</head>
<body>
    <div class="container">
        <h1>欢迎来到换肤示例页面</h1>
        <p>点击按钮切换不同的皮肤风格</p>
    </div>
    <button id="skinBtn">切换皮肤</button>

    <script src="script.js"></script>
</body>
</html>

CSS部分（styles文件夹下）

default.css

body {
    font-family: Arial, sans-serif;
    background-color: #fff;
    color: #333;
}

.container {
    text-align: center;
    margin-top: 50px;
}

#skinBtn {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

dark.css

body {
    background-color: #333;
    color: #fff;
}

.container {
    text-align: center;
    margin-top: 50px;
}

#skinBtn {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #555;
    color: #fff;
}

light.css

body {
    background-color: #f0f0f0;
    color: #333;
}

.container {
    text-align: center;
    margin-top: 50px;
}

#skinBtn {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #e0e0e0;
    color: #333;
}

JavaScript部分

（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const skinBtn = document.getElementById('skinBtn');
    let currentSkin = 'default'; // 默认皮肤

    skinBtn.addEventListener('click', function() {
        switch (currentSkin) {
            case 'default':
                changeSkin('dark');
                break;
            case 'dark':
                changeSkin('light');
                break;
            case 'light':
                changeSkin('default');
                break;
            default:
                changeSkin('default');
        }
    });

    function changeSkin(skin) {
        const link = document.querySelector("link[rel='stylesheet']");
        link.href = `styles/${skin}.css`;
        currentSkin = skin;
    }
});