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

Posted duxiu-fang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css, js 项目联系之网页换肤相关的知识,希望对你有一定的参考价值。

首先,该练习参考自: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`;
                );
            
        ;

 

以上是关于css, js 项目联系之网页换肤的主要内容,如果未能解决你的问题,请参考以下文章

js实现换肤效果

js网页换肤

用.NET做网站,在页面放一个按钮,点击按钮实现网页换肤功能,求代码

网页换肤

antd在线换肤定制功能

网页换肤:原生js与jq