js实现元素样式切换（附码）

小猫娃来啦

已于 2023-03-21 18:54:38 修改

阅读量991

点赞数 6

分类专栏： JS 文章标签： javascript 前端 html Powered by 金山文档

于 2023-02-18 10:25:11 首次发布

本文链接：https://blog.csdn.net/dyk11111/article/details/129097205

版权

JS 专栏收录该内容

29 篇文章 9 订阅

订阅专栏

需求：

用户第一次点击某些元素，改变元素的某些样式，比如背景颜色，字体颜色。

用户第二次点击某些元素，恢复之前的样式。

.....

思路：

准备一定量的div盒子，并取相同的类名

<div class="box" ></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

通过js获取所有元素，并给定指令。使得点击任意一个盒子，都可随意改变原有样式，而不影响其他盒子

判断，如果当前点击的盒子背景被改变，则再点击当前盒子背景恢复。

效果：

代码实现：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.box {
width: 50px;
height: 50px;
background-color: aqua;
margin: 5px;
}
</style>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script>
let box = document.querySelectorAll(".box");
for (let i = 0; i < box.length; i++) {
box[i].onclick = function() {
if (box[i].style.background == '' || box[i].style.background == undefined) {
box[i].style.background = 'red'
} else {
if (box[i].style.background == 'red') {
box[i].style.background = 'aqua'
} else if (box[i].style.background == 'aqua') {
box[i].style.background = 'red'
}
}
}
}
</script>

</body>
</html>

小猫娃来啦

关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
js实现元素样式切换（附码）

通过js获取所有元素，并给定指令。使得点击任意一个盒子，都可随意改变原有样式，而不影响其他盒子。用户第一次点击某些元素，改变元素的某些样式，比如背景颜色，字体颜色。判断，如果当前点击的盒子背景被改变，则再点击当前盒子背景恢复。用户第二次点击某些元素，恢复之前的样式。准备一定量的div盒子，并取相同的类名。
复制链接

扫一扫