原生js 点击按钮给弹窗增加类名
时间: 2024-01-04 19:03:49 浏览: 30
可以使用以下代码:
```
document.getElementById("buttonId").addEventListener("click", function(){
document.getElementById("popupId").classList.add("className");
});
```
其中,"buttonId" 是按钮的 ID,"popupId" 是弹窗的 ID,"className" 是要增加的类名。
相关问题
点击一个按钮,就会增加类名。如果类名存在就会删除再次增加 js
代码:
```
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通过类名获取鼠标点击按钮的动作
可以使用JavaScript的`getElementsByClassName`方法来获取所有具有指定类名的元素,并为它们绑定点击事件监听器。示例如下:
```html
<button class="myButton">按钮1</button>
<button class="myButton">按钮2</button>
<button class="myButton">按钮3</button>
<script>
var myButtons = document.getElementsByClassName("myButton");
for (var i = 0; i < myButtons.length; i++) {
myButtons[i].addEventListener("click", function() {
console.log("按钮" + (i+1) + "被点击了!");
});
}
</script>
```
在上面的代码中,我们首先使用`document.getElementsByClassName`方法获取所有类名为`myButton`的按钮元素,然后使用一个循环为每个按钮元素添加了一个"click"事件监听器。当用户点击任意一个按钮时,就会执行我们传入的回调函数,这里我们输出了被点击的按钮的编号。需要注意的是,在循环中使用`let`声明变量`i`可以避免变量作用域的问题,但是在低版本浏览器中可能不支持`let`,因此可以使用闭包或者通过函数传参来解决该问题。