js+css实现换肤效果
更新时间：2022年07月03日 05:46:57 作者：吃葡萄不吐葡萄皮嘻嘻
这篇文章主要为大家详细介绍了js+css实现换肤效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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实现数组相邻元素上移下移,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了javascript中的some方法使用解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
本篇文章主要介绍基于javascript实现按圆形排列DIV元素的方法，此文着重于介绍怎样实现图片按椭圆形转动，需要的朋友来看下吧2016-12-12
这篇文章主要介绍了JS使用正则表达式实现常用的表单验证功能,结合实例形式分析了JS基于正则表达式的表单验证功能原理、实现技巧与操作注意事项,需要的朋友可以参考下2020-04-04
FireFox并没有 window.event ,所以在FireFox下编写事件处理函数是很麻烦的事。如果要得到 event 对象,就必须要声明时间处理函数的第一个参数为event2009-11-11
在面向对象的编程中，很多语言都支持函数重载，能根据函数传递的不同个数、类型的参数来做不同的操作，JS对它却不支持，需要我们额外做些小动作。2014-05-05
JavaScriptlocalStorage基本上是浏览器Window对象中的存储，您可以在中存储任何内容localStorage，localStorage及其相关的sessionStorage是 Web Storage API的一部分，我们将在本文详细了解这些,需要的朋友可以参考下2023-06-06
这篇文章主要给大家介绍了关于ES6入门教程之Array.from()方法的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用ES6具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
这篇文章主要介绍了用js传递value默认值的简单实现,很简单但比较实用，需要的朋友可以参考下2014-09-09
这篇文章主要介绍了原生JS实现获取及修改CSS样式的方法,结合实例形式简单分析了JavaScript针对页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2018-09-09
最新评论