点击后并没有切换背景颜色
时间: 2023-10-10 08:13:02 浏览: 47
非常抱歉,我的回答有误。这段代码中存在两个问题:
1. 在 JavaScript 部分,获取元素的方法应该是`document.getElementsByClassName("item")`,而不是`document.getElementsByClassName(".item")`。因为在`getElementsByClassName`方法中不需要加点符号。
2. 在 JavaScript 部分,修改元素样式的代码应该是`this.style.backgroundColor = "pink";`,而不是`this.style.background = "pink";`。因为在 JavaScript 中,样式属性是通过 `style` 对象来访问的,并且背景颜色对应的属性名是 `backgroundColor`。
正确的代码如下所示:
```html
<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>let</title>
<script>
let items = document.getElementsByClassName("item");
//遍历并绑定事件
for (let i = 0; i < items.length; i++) {
items[i].onclick = function () {
//点击切换背景颜色
this.style.backgroundColor = "pink";
};
}
</script>
<style>
.container {
margin: auto;
}
.item {
display: inline-block;
width: 200px;
height: 100px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<h3>点击切换背景颜色</h3>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</body>
</html>
```
我深表歉意,并感谢您的指正。