用HTML和css,js更改盒子的大小。点击偶数次变大,奇数次变小。
时间: 2024-02-18 16:59:29 浏览: 72
好的,下面是一个使用 HTML、CSS 和 JavaScript 实现的例子,可以实现点击盒子时交替变大和变小的效果:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Change Box Size</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById("box");
var count = 0;
box.addEventListener("click", function() {
if (count % 2 === 0) {
box.style.width = "200px";
box.style.height = "200px";
} else {
box.style.width = "100px";
box.style.height = "100px";
}
count++;
});
</script>
</body>
</html>
```
这段代码中,我们首先定义了一个 id 为 "box" 的 div 元素,然后在 CSS 中设置了其初始大小和背景颜色,并设置鼠标指针为手型。在 JavaScript 中,我们获取了这个元素,并添加了一个点击事件的监听器。每次点击时,判断点击次数是偶数还是奇数,从而更改盒子的大小。当点击次数为偶数时,将盒子的宽度和高度都设置为 200 像素;当点击次数为奇数时,将盒子的宽度和高度都设置为 100 像素。最后,将点击次数加 1。
阅读全文