用js实现多个大小相同的方块,点击变大
时间: 2023-11-27 17:49:18 浏览: 33
可以使用以下HTML和CSS代码实现多个大小相同的方块:
HTML代码:
```html
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
```
CSS代码:
```css
.box {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
cursor: pointer;
transition: all 0.3s ease;
}
.box:hover {
transform: scale(1.2);
}
```
这段代码会生成四个大小相同、边框为黑色的方块,并且当鼠标悬停在方块上时,方块会放大1.2倍。
如果你想要在点击方块时使其变大,可以添加以下JavaScript代码:
```javascript
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
boxes[i].addEventListener('click', function() {
this.classList.toggle('box--large');
});
}
```
这段代码会为每个方块添加一个点击事件监听器,当方块被点击时,它会切换一个名为`box--large`的CSS类。然后,你可以使用以下CSS代码来定义这个类:
```css
.box--large {
transform: scale(1.2);
}
```
这样,当方块被点击时,它会放大1.2倍,再次点击时会恢复原来的大小。