通过 class 获取元素，以 class 名称定位页面上的所有元素

Question

我正在尝试展示管道中的不同项目阶段。当用户将鼠标悬停在管道的每个阶段时，该阶段内项目的边框颜色会更改以突出显示它们。很简单。

好吧，我似乎无法定位该页面上 class 中的所有项目，它只能让我使用 [0] 定位一个项目。但我需要它来获得 class 中的所有 div，而不仅仅是 1 个。似乎是一个简单的修复，但我似乎找不到任何关于此的东西。

    <script>
function scanSHOW() {

    document.getElementsByClassName('scan-item')[0].style.border="2px #FF0000 solid";}

function scanHIDE() {   

document.getElementsByClassName('scan-item')[0].style.border="2px #666666 solid";}

    </script>


<style>.scan-item {border: 2px #666666 solid;}</style>

HTML:

<img id="pipes" src="pipeline.png" usemap="#pipeline" width="483" height="221">

<map name="pipeline">
  <area shape="rect" coords="1,69,66,221" href="#" onMouseOver="scanSHOW();" onMouseOut="scanHIDE();" alt="Scan" title="Scan">

</map>

<br/>

<div  class="scan-item block"></div> <div  class="scan-item block"></div> <div  class="scan-item block"></div> <div  class="scan-item block"></div>

Answer 1

这正是循环的用途。一个简单的 for 循环依次循环遍历每个元素就可以解决问题。类似于：

var elements = document.getElementsByClassName('scan-item');
for (var i = 0; i < elements.length; i++) {
    elements[i].style.border="2px #FF0000 solid";
}

Answer 2

我觉得最简单的就是在全身设置一个点击监听，然后监听某个class的点击。这样你就可以遍历点击对象的dom，然后做任何你想做的事情。

function clickHandler(e){

e = e || window.event;
const target = e.target || e.srcElement;

    if (target.className.match(/CLASS NAME HERE/)) {
        //do something with the target (traverse up or down - change the element or whatever have you)
        console.log(e.target)
    }

}

if (document.body.addEventListener){
document.body.addEventListener('click', clickHandler, false);
}

Ps！如果你执行 for 循环，那么我通常会运行稍后遇到问题，以上是最可靠的（至少对我而言）。

通过 class 获取元素，以 class 名称定位页面上的所有元素

get element by class, target all elements on page with class name

javascript

css

class

getelementsbyclassname