点击一个按钮,就会增加类名。如果类名存在就会删除再次增加 js
时间: 2024-06-12 07:08:23 浏览: 10
代码:
```
const button = document.querySelector('button');
button.addEventListener('click', function() {
const element = document.querySelector('.my-class');
if (element) {
element.classList.remove('my-class');
} else {
button.classList.add('my-class');
}
});
```
解释:
1. 获取按钮元素并添加点击事件监听器。
2. 在点击事件回调函数中获取类名为 "my-class" 的元素。
3. 如果存在该元素,则从中移除 "my-class" 类名。
4. 如果不存在该元素,则将类名 "my-class" 添加到按钮元素中。
相关问题
原生js 点击按钮给弹窗增加类名
可以使用以下代码:
```
document.getElementById("buttonId").addEventListener("click", function(){
document.getElementById("popupId").classList.add("className");
});
```
其中,"buttonId" 是按钮的 ID,"popupId" 是弹窗的 ID,"className" 是要增加的类名。
jq点击按钮添加类名和删除类名的多种方法
有多种方法可以使用 jQuery 来添加和删除类名。以下是其中的一些示例代码:
1. 使用 addClass() 和 removeClass() 方法:
```javascript
// 添加类名
$('button').click(function() {
$('div').addClass('active');
});
// 删除类名
$('button').click(function() {
$('div').removeClass('active');
});
```
2. 使用 toggleClass() 方法:
```javascript
$('button').click(function() {
$('div').toggleClass('active');
});
```
3. 使用 attr() 方法:
```javascript
// 添加类名
$('button').click(function() {
$('div').attr('class', 'active');
});
// 删除类名
$('button').click(function() {
$('div').removeAttr('class');
});
```
4. 使用 css() 方法:
```javascript
// 添加类名
$('button').click(function() {
$('div').css('background-color', 'red');
});
// 删除类名
$('button').click(function() {
$('div').css('background-color', '');
});
```
这些示例代码可以根据你的具体需求进行修改和扩展。