本文实例为大家分享了js+css实现换肤效果的具体代码，供大家参考，具体内容如下
效果图如下：
需求：点击对应小圆点，下面内容颜色跟着改变
主要思路：
1.在css中把对应的样式先写好；
2.获取小圆点给它绑定点击事件；
3.获取当前点击元素的类名；
4.将该类名设置给body；
js主要考察的是获取属性值和设置属性值；
<style>
? ? ? ? *{
? ? ? ? ? ? margin:0;
? ? ? ? ? ? padding:0;
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ? .dot{
? ? ? ? ? ??
? ? ? ? ? ? margin:100px auto;
? ? ? ? ? ? display: flex;
? ? ? ? ? ? justify-content: center;
? ? ? ? }
? ? ? ? .dot li{
? ? ? ? ? ? width: 30px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ?cursor: pointer;
? ? ? ? }
? ? ? ? .dot li:first-child{
? ? ? ? ? ? background:pink;
? ? ? ? }
? ? ? ? .dot li:nth-child(2){
? ? ? ? ? ? background:green;
? ? ? ? }
? ? ? ? .dot li:nth-child(3){
? ? ? ? ? ? background:gold;
? ? ? ? }
? ? ? ? .dot li:last-child{
? ? ? ? ? ? background:skyblue;
? ? ? ? }
? ? ? ? .dot li:not(:last-child){
? ? ? ? ? ? margin-right: 10px;
? ? ? ? }
? ? ? ? .content{
? ? ? ? ? ? margin:100px auto;
? ? ? ? ? ? width: 300px;
? ? ? ? }
? ? ? ? .pink .content .banner{
? ? ? ? ? ? height: 160px;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? background:pink;
? ? ? ? }
? ? ? ? .pink .content li{
? ? ? ? ? ? color:pink;
? ? ? ? ? ? margin-bottom: 10px;
? ? ? ? ? ? border-bottom: 1px dashed pink;
? ? ? ? ? ? line-height: 40px;
? ? ? ? }
? ? ? ? .green .content .banner{
? ? ? ? ? ? height: 160px;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? background:green;
? ? ? ? }
? ? ? ? .green .content li{
? ? ? ? ? ? color:green;
? ? ? ? ? ? margin-bottom: 10px;
? ? ? ? ? ? border-bottom: 1px dashed green;
? ? ? ? ? ? line-height: 40px;
? ? ? ? }
? ? ? ? .gold .content .banner{
? ? ? ? ? ? height: 160px;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? background:gold;
? ? ? ? }
? ? ? ? .gold .content li{
? ? ? ? ? ? color:gold;
? ? ? ? ? ? margin-bottom: 10px;
? ? ? ? ? ? border-bottom: 1px dashed gold;
? ? ? ? ? ? line-height: 40px;
? ? ? ? }
? ? ? ? .skyblue .content .banner{
? ? ? ? ? ? height: 160px;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? background:skyblue;
? ? ? ? }
? ? ? ? .skyblue .content li{
? ? ? ? ? ? color:pink;
? ? ? ? ? ? margin-bottom: 10px;
? ? ? ? ? ? border-bottom: 1px dashed skyblue;
? ? ? ? ? ? line-height: 40px;
? ? ? ? }
</style>
<body class="pink">
? ? <ul class="dot">
? ? ? ? <li class="pink"></li>
? ? ? ? <li class="green"></li>
? ? ? ? <li class="gold"></li>
? ? ? ? <li class="skyblue"></li>
? ? </ul>
? ? <div class="content">
? ? ? ? <div class="banner"></div>
? ? ? ? <ul>
? ? ? ? ? ? <li>奶茶</li>
? ? ? ? ? ? <li>火锅</li>
? ? ? ? ? ? <li>串串</li>
? ? ? ? ? ? <li>烤肉</li>
? ? ? ? </ul>
? ? </div>
? ? <script>
? ? ? ? window.onload = function(){
? ? ? ? ? ? let lis = document.querySelectorAll('.dot li');
? ? ? ? ? ? let body = document.querySelector('body');
? ? ? ? ? ? for(let i=0;i<lis.length;i++){
? ? ? ? ? ? ? ? lis[i].addEventListener('click',function(){
? ? ? ? ? ? ? ? ? ? // 获取属性值：元素名.属性名 ?设置属性值：元素名.属性名 = 属性值 ； ?移除属性：元素名.属性名 = "";(此种方法不能获取，设置，移除自定义属性)
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? //获取属性值 ：元素名.getAttribute('属性名') ?;设置属性值：元素名.setAttribute('属性名'，'属性值') ；移除属性：元素名.removeAttribute('属性名') （此种方法能获取，设置，移除自定义属性，可对任何属性有效）
? ? ? ? ? ? ? ? ? ? let color = this.getAttribute('class')
? ? ? ? ? ? ? ? ? ? body.setAttribute('class',color)
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</body>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did124487