js判断点击class添加类名再次点击删除类名
时间: 2023-08-09 18:00:13 浏览: 98
要实现在点击一个元素时给它添加一个类名,再次点击时删除该类名,可以使用JavaScript来实现。
首先,我们需要获取到需要点击的元素,并为其绑定一个点击事件。可以通过getElementById、getElementsByClassName或querySelector等方法来获取元素。
然后,在点击事件的回调函数中,我们可以使用classList属性来操作元素的类名。通过判断元素是否含有某个类名,来决定是添加还是删除该类名。如果元素含有该类名,则使用remove方法来删除它;如果不含有该类名,则使用add方法来添加它。
下面是一个示例代码:
```javascript
var element = document.querySelector('.example');
element.addEventListener('click', function() {
if (element.classList.contains('selected')) {
element.classList.remove('selected');
} else {
element.classList.add('selected');
}
});
```
在上述代码中,首先通过querySelector方法获取到一个类名为"example"的元素。然后为该元素添加一个点击事件的监听器。在点击事件的回调函数中,通过classList的contains方法来检查元素是否含有类名"selected"。如果含有,则调用remove方法来删除它;如果不含有,则调用add方法来添加它。
这样,每次点击该元素时,都会根据当前的类名状态来执行相应的操作,实现了点击一次添加类名,再次点击删除类名的效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)