欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css, js 项目联系之网页换肤

程序员文章站 2024-02-01 17:31:40
首先,该练习参考自:https://www.jianshu.com/p/2961d9c317a3 我就直接上代码了(颜色可以自己调)。 HTML: CSS: green.css red.css blue.css JavaScript: ......

首先,该练习参考自:https://www.jianshu.com/p/2961d9c317a3

我就直接上代码了(颜色可以自己调)。

html:

    <nav>
        <li><a href="#">独秀不爱秀</a></li>
        <li><a href="#">独秀不爱秀</a></li>
        <li><a href="#">独秀不爱秀</a></li>
        <li><a href="#">独秀不爱秀</a></li>
        <li><a href="#">独秀不爱秀</a></li>
        <li><a href="#">独秀不爱秀</a></li>
    </nav>
    <ul id="skin">
        <li id="red"></li>
        <li id="green" class="current"></li>
        <li id="blue"></li>
    </ul>

css:

        /* 公共部分 */
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            font-size: 16px;
            transition: all 1s;
        }
        ul, nav {
            list-style: none;
        }


        /* 网页皮肤选择模块 */
        #skin {
            margin-left: 100px;
            margin-top: 100px;
        }
        #skin li {
            width: 50px;
            height: 50px;
            color: #fff;
            line-height: 50px;
            text-align: center;
            border-radius: 50%;
        }
        #skin li + li {
            margin-top: 10px;
        }
        #skin #red {
            background-color: red;
            border: 25px solid red;
        }
        #skin #green {
            background-color: #009688bd;
            border: 25px solid #009688bd;
        }
        #skin #blue {
            background-color: blue;
            border: 25px solid blue;
        }
        #skin li.current {
            background-color: #fff!important;
        }
        #skin li:hover, #skin li:focus {
            background-color: #fff!important;
        }

        /* nav 模块 */
        nav {
            width: 700px;
            height: 50px;
            margin: 100px auto;
        }
        nav li {
            width: 100px;
            height: 50px;
            float: left;
            line-height: 50px;
            text-align: center;
            transition: all 1s;
       border: 1px solid #fff; } nav li + li { margin-left: 10px; } nav li a { color: #fff; text-decoration: none; } nav li a:hover, nav li a:focus { text-decoration: underline; }

green.css

body {
    background: #8bc34a;
}
nav li {
    background-color: #009688bd;
}

red.css

body {
    background: #9e9e9e5e;
}
nav li {
    background-color: #ff5722eb;
}

blue.css

body {
    background: #673ab7a6;
}
nav li {
    background-color: #03a9f4a3;
}

javascript:

      window.onload = () => {
            // 获取选择皮肤按钮
            const skinli = document.getelementbyid('skin').queryselectorall('li');
            // 获取 link 标签
            const csslink = document.getelementbyid('link');

            for (let i = 0; i < skinli.length; i++) {
                skinli[i].addeventlistener('click', () => {
                    // 当点击每一个选择的时候先去除掉所有选择按钮的 class
                    for (ele in skinli) {
                        skinli[ele].classname = '';
                    }
                    skinli[i].classname = 'current';
                    csslink.href = `css/${skinli[i].id}.css`;
                });
            }
        };