JS 如何通过点击改变所有相同class的属性
时间: 2024-02-19 20:58:34 浏览: 20
可以通过以下步骤实现:
1. 使用 `document.querySelectorAll()` 方法选择所有具有相同类名的元素,例如:
```javascript
var elements = document.querySelectorAll('.my-class');
```
2. 遍历所有选定的元素,使用 `addEventListener()` 方法为每个元素添加点击事件,例如:
```javascript
elements.forEach(function(element) {
element.addEventListener('click', function() {
// 这里写点击事件的处理逻辑
});
});
```
3. 在点击事件处理逻辑中,可以使用 `this` 关键字来引用当前被点击的元素,然后改变其属性,例如:
```javascript
this.style.backgroundColor = 'red';
```
完整的代码示例:
```javascript
var elements = document.querySelectorAll('.my-class');
elements.forEach(function(element) {
element.addEventListener('click', function() {
this.style.backgroundColor = 'red';
});
});
```
这将会选择所有具有类名为 `my-class` 的元素,并在点击时将它们的背景颜色设置为红色。