使用javascript来定位类

Using javascript to target class

本文关键字：定位 javascript 使用      更新时间：2024-01-15

我在头部元素中有以下脚本：

<script>
function changeOpacity(className) {
var elems = document.getElementsByClassName(className);
var index = 0, length = elems.length;
for ( ; index < length; index++) {
    elems[index].style.transition = "opacity 0.3s linear 0s";
    elems[index].style.opacity = 0.8;
    }
}
</script>
<style>
.red_box {width:100px;height:100px;opacity:1;background:red}
</style>

和以下结构中的主体元素：

<div onmouseover="changeOpacity('.red_box')">Click to fade red boxes</div>
<div class="red_box">Box 1</div>
<div class="red_box">Box 2</div>
<div class="red_box">Box 3</div>

我试图实现以下目标：当用户单击"单击以淡化红框"消息时，该函数应该使每个带有类"red_box"的div变为透明。我想要一些指针（请不要Jquery），谢谢！

调用函数时删除类名中的点：

onmouseover="changeOpacity('red_box')"

document.getElementsByClassName(className)将类名作为字符串。如果您想使用CSS选择器，可以使用document.querySelectorAll('.red_box')。

正如@pointy在他的评论中指出的，您还将不透明度设置为与初始值相同。可能需要将其更改为0到0.9之间的值，具体取决于所需的透明度级别。

您在css和函数中设置了相同的不透明度，还需要在onmouseover="changeOpacity('red_box')" 中删除点

将js函数和html更改为如下所示，它将很好地工作。

function changeOpacity(className) {
  var elems = document.getElementsByClassName(className);
  console.log(elems)
  var index = 0,
    length = elems.length;
  for (; index < length; index++) {
    elems[index].style.transition = "opacity 0.3s linear 0s";
    elems[index].style.opacity = 0.5;
  }
}
.red_box {
  width: 100px;
  height: 100px;
  opacity: 1;
  background: red
}
<div onmouseover="changeOpacity('red_box')">Click to fade red boxes</div>
<div class="red_box">Box 1</div>
<div class="red_box">Box 2</div>
<div class="red_box">Box 3</div>

相关文章：