Question

我有一个脚本，它将在多个帧中找到元素，并突出显示/更改文本颜色。该脚本的工作方式是，当您将鼠标悬停在“快速棕色狐狸”的每个单词上时，指针下的单词将显示为红色并以黄色突出显示。 frame2中的相同单词也将为红色/高亮显示。请注意，元素ID与类名相同。

<html><head><title>Test</title>
  <script>
    function hey(id)
      {document.getElementById(id).style.color = "red";
      document.getElementById(id).style.backgroundColor = "yellow";
      window.parent.frames["frame2"].document.getElementById(id).style.color = "red";
      window.parent.frames["frame2"].document.getElementById(id).style.backgroundColor = "yellow";} 
    function bye(id)
      {document.getElementById(id).style.color = "black";
      document.getElementById(id).style.backgroundColor = "white";
      window.parent.frames["frame2"].document.getElementById(id).style.color = "black";
      window.parent.frames["frame2"].document.getElementById(id).style.backgroundColor = "white";}
  </script>
</head>
<body>
  <a id="w1" class="w1 w4" onmouseover="hey(this.id)" onmouseout="bye(this.id)">The</a> 
  <a id="w2" class="w2" onmouseover="hey(this.id)" onmouseout="bye(this.id)">quick</a>
  <a id="w3" class="w3" onmouseover="hey(this.id)" onmouseout="bye(this.id)">brown</a> 
  <a id="w4" class="w1 w4" onmouseover="hey(this.id)" onmouseout="bye(this.id)">fox</a>
</body></html>

现在我想编辑这个脚本，以便它获取id并按类查找元素。例如，当你将鼠标悬停在“fox”时，id =“w4”。我想在链接的类中找到“w4”，这样无论何时被鼠标悬停，“The”和“fox”都会被红色/突出显示。我无法弄清楚如何使用id中的值来使用getElementsByClassName。有什么想法吗？

Answer 1

getElementsByClassName返回一个必须循环的数组。尝试以下代码。

var elements = document.getElementsByClassName(id);

for(var i=0; i<elements.length; i++)
    elements[i].style.color = "red";

如何使用元素ID getElementsByClassName？

1 个答案: