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;
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 项目联系之网页换肤的主要内容,如果未能解决你的问题,请参考以下文章