您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容介绍了“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>“js+css如何实现换肤效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。