Question

我在head元素中有以下脚本：

<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>

以及body元素中的以下结构：

<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>

我正在尝试实现以下功能：当用户点击“Click to fade red boxes”消息时，该函数应该使每个div与类：'red_box'变为透明。我会喜欢一些指针（请不要Jquery），谢谢！

Answer 1

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

onmouseover="changeOpacity('red_box')"

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

正如@pointy在他的评论中指出的那样，你也将不透明度设置为与初始值相同。可能希望将其更改为0到0.9之间的某个值，具体取决于您想要的透明度级别。

Answer 2

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

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

＆＃13;

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;
  }
}

＆＃13;

.red_box {
  width: 100px;
  height: 100px;
  opacity: 1;
  background: red
}

＆＃13;

<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>

＆＃13;

使用javascript来定位类

2 个答案: