js+css实现换肤效果
作者：吃葡萄不吐葡萄皮嘻嘻 时间：2024-04-17 09:53:54
本文实例为大家分享了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>
来源：https://blog.csdn.net/qq_45695853/article/details/119350792
标签：js,css,换肤
0
投稿猜你喜欢
如何在网页设计中使用个性化字体
2009-07-07 11:29:00
vue使用localStorage保存登录信息 适用于移动端、PC端
2024-04-30 08:46:25
Python+AutoIt实现界面工具开发过程详解
2023-06-17 20:39:47
解决mybatis 数据库date 与 java中Date类型映射问题
2024-01-23 04:59:05
linux环境中没有网络怎么下载python
2021-01-30 04:42:12
MySql存储过程和游标的使用实例
2024-01-13 09:50:11
php+mysql实现简单登录注册修改密码网页
2024-04-30 08:49:54
你的like语句为什么没索引详解
2024-01-13 14:16:18
关于TypeScript模块导入的那些事
2024-06-07 15:57:46
python3+selenium自动化测试框架详解
2022-01-29 18:26:01
python字符串连接方法分析
2021-12-24 16:27:10
在SQLite-Python中实现返回、查询中文字段的方法
2022-05-31 00:17:32
Python序列的推导式实现代码
2022-04-24 05:53:46
Django drf使用Django自带的用户系统的注册功能
2023-07-15 00:21:38
python中的十大％占位符对应的格式化的使用方法
2022-04-28 08:54:21
javascript设置和获取cookie的方法实例详解
2024-04-22 13:05:08
asp随机生成文件名的函数
2009-02-11 13:41:00
详解mysql的limit经典用法及优化实例
2024-01-15 19:45:25
Go实现一个配置包详解
2024-05-22 10:29:57
浅谈javascript中onbeforeunload与onunload事件
2024-04-19 09:46:08