如何使用javaScript中的.classList.add(‘class’)在具有多个相同类名的元素上添加样式
如何使用javaScript中的.classList.add(‘class’)在具有多个相同类名的元素上添加样式
提问于 2021-06-05 07:46:28
我有多个具有相同类名的元素，所以我尝试使用JavaScript获取该类并添加样式，但它并不像预期的那样工作。我希望我悬停在上面的每个元素都能得到css中的样式a，但不是所有的元素。
这是我尝试过的：
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(233, 232, 255);
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.card {
width: 300px;
height: 300px;
}
/* The style i want on each card when i hover over*/
.transparent {
opacity: 0.5;
}
/*---------------*/
.card-1 {
background-color: rgb(144, 140, 223);
}
.card-2 {
background-color: rgb(133, 207, 163);
}
.card-3 {
background-color: rgb(241, 157, 234);
}
</style>
</head>
<body>
<div class="container">
<div class="card card-1"></div>
<div class="card card-2"></div>
<div class="card card-3"></div>
</div>
<script>
const makeCardTransparent = (cardClassName) => {
const card = document.getElementsByClassName(cardClassName)
if(card){
for(var i = 0; i < card.length; i++){
card[i].addEventListener('mouseover', () => {
card[i].classList.add('transparent');
})
}
}
}
makeCardTransparent('card')
</script>
</body>
</html>但这是我在javaScript控制台中遇到的错误：
TypeError: undefined is not an object (evaluating 'card[i].classList')你能帮我怎么做吗，谢谢。
编辑 JavaScript中的代码如下所示：
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(233, 232, 255);
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.sub-container {
background-color: rgb(61, 60, 94);
padding: 1em;
border-right: 2px solid rgb(233, 232, 255);
}
.card {
width: 300px;
height: 300px;
}
/* The style i want on each card when i hover over*/
.transparent {
opacity: 0.5;
}
/*----------------------------------------------*/
.card-1 {
background-color: rgb(144, 140, 223);
}
.card-2 {
background-color: rgb(133, 207, 163);
}
.card-3 {
background-color: rgb(241, 157, 234);
}
</style>
</head>
<body>
<div class="container">
<div class="sub-container">
<div class="card card-1"></div>
</div>
<div class="sub-container">
<div class="card card-2"></div>
</div>
<div class="sub-container">
<div class="card card-3"></div>
</div>
</div>
<script>
const makeCardTransparent = (cardClassName, subContainerClassName) => {
const card = document.getElementsByClassName(cardClassName)
const subContainer = document.getElementsByClassName(subContainerClassName)
if(card && subContainer){
for(var i = 0; i < card.length; i++){
subContainer[i].addEventListener('mouseover', () => {
card.classList.add('transparent');
})
}
}
}
makeCardTransparent('card')
</script>
</body>
</html>回答 2
Stack Overflow用户
发布于 2021-06-05 07:53:42
侦听器使其失去初始循环的作用域，必须检查该事件的目标。
if(card){
for(var i = 0; i < card.length; i++){
card[i].addEventListener('mouseover', (evt) => {
evt.target.classList.add('transparent');
})
}
}另外，我建议您使用@john的方法，因为它以更简单的方式完成了您想要的任务。
Stack Overflow用户
发布于 2021-06-05 07:51:37
您可以使用CSS来完成这一任务，而不需要JS。
有一个CSS伪类 :hover，它在元素悬停时将CSS应用到元素上。在所提供的解决方案中，不透明度在0.5s内很容易降低。如果不需要动画，只需删除transition属性即可。
.card {
width: 300px;
height: 300px;
transition: opacity 0.5s ease;
}
.card:hover {
opacity: 0.5;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67847490
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号