javascript - 未捕获的类型错误 : Cannot set properties of undefined (setting 'display' )

Question

我正在为我的音乐 react 应用程序制作一个进度条。我想让进度指示器在用户将鼠标悬停在进度栏容器上时显示。但我面临这个错误:未捕获的类型错误:无法设置未定义的属性(设置“显示”)

我的 JavaScript:

document.getElementsByClassName('rhap_progress-container')[0].onmouseover = function(){
  document.getElementsByClassName('rhap_progress-indicator').style.display = "block";
}
document.getElementsByClassName('rhap_progress-container')[0].onmouseout = function(){
  document.getElementsByClassName('rhap_progress-indicator').style.display = "none";
}

我的html:

<div class="rhap_progress-container" aria-label="Audio progress control" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="24.67" tabindex="0">
  <div class="rhap_progress-bar ">
    <div class="rhap_progress-indicator" style="left: 24.67%;"></div>
    <div class="rhap_progress-filled" style="width: 24.67%;"></div>
  </div>
</div>

我的CSS:

.rhap_progress-indicator {
  display: none;
  width: 18px !important;
  height: 18px !important;
  border: 3px solid #232530;
  top: -7 px !important;
  box-shadow: none !important;
  opacity: 1 !important;
  content: url('./img/outlined-progress-indicator.png');
}

Answer 1

document.getElementsByClassName 返回一个数组。

因此 document.getElementsByClassName('rhap_progress-indicator') 还需要选择数组的索引:

document.getElementsByClassName('rhap_progress-indicator')[0]。

另一种方法是使用 document.querySelector('.rhap_progress-indicator')，它会返回元素(如果存在)。