Javascript | 未捕获的类型错误：无法设置未定义的属性“颜色”

Question

我有一个 div，当悬停开/关时，它会更改其中元素的 css。但是，当我将鼠标悬停和鼠标移开时，出现错误，并且颜色没有更改（错误在这个问题的标题中）

有趣的是前两个更改有效（更改图像并更改 id“ace_title”的颜色，但“ace_feature”的鼠标悬停和鼠标移出会生成错误。

下面是我的代码和我尝试过的：

<div class="service_level effect8" onmouseover="getElementById('ace_service').src='images/ace_hover.png';
    getElementById('ace_title').style.color='#2C81B7';
    getElementsByClassName('ace_features').style.color='#2C81B7';"
    onmouseout="getElementById('ace_service').src='images/ace.png';
    getElementById('ace_title').style.color='black';
    getElementsByClassName('ace_features').style.color='black';">

    <img src="images/ace.png" id="ace_service">
    <p id="ace_title">Ace Service</p>

    <img src="images/icon_tick.png" style="float: left; padding: 3px 4px 0px 15px;">
    <p class="ace_features">
        Outstanding IT Support
    </p>

    <img src="images/icon_tick.png" style="float: left; padding: 3px 4px 0px 15px;">
    <p class="ace_features">
        Outstanding IT Support
    </p>

Answer 1

当您使用时getElementById，您会收到一个元素，因此它可以工作。当您使用时，getElementsByClassName您会收到一个元素集合（在您的情况下包含两个元素），因此它不起作用。

以下行应该有效：

getElementsByClassName('ace_features')[0].style.color='black'

但使用普通脚本块而不是内联会更好

Answer 2

这行：

document.getElementsByClassName('ace_features')

返回一个元素数组或未定义的数组

您应该将鼠标悬停事件更改为外部函数，这样您就可以迭代所有类名称

document.getElementsByClassName('ace_features')

function onMouseOver() {
  document.getElementById('ace_service').src = 'images/ace_hover.png';
  document.getElementById('ace_title').style.color = '#2C81B7';
  var elements = document.getElementsByClassName('ace_features'), i, len;
  
  for (i = 0, len = elements.length; i < len; i++) {
    elements[i].style.color = '#2C81B7';
  }
}

function onMouseOut() {
  document.getElementById('ace_service').src = 'images/ace.png';
  document.getElementById('ace_title').style.color = 'black';
  var elements = document.getElementsByClassName('ace_features'), i, len;
  
  for (i = 0, len = elements.length; i < len; i++) {
    elements[i].style.color = 'black';
  }
}