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

【问题标题】：Javascript | Uncaught TypeError: Cannot set property 'color' of undefinedJavascript |未捕获的类型错误：无法设置未定义的属性“颜色”
【发布时间】：2015-07-25 18:42:45
【问题描述】：

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

有趣的是前两个更改起作用（更改图像并更改 id 'ace_title' 的颜色，但 'ace_feature' 的 mouseover 和 mouseout 会产生错误。

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

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

【问题讨论】：

"document.getElementById('ace_service').src
getElementById 和 getElementsByClassName 都是 document 的函数。
为什么不尝试将javascript变量放入var然后应用.color
请正确缩进您的代码。
你可以在google crome开发者工具中试试。尝试提醒 getElementById('ace_title').style 。我想你会在那里得到一个未定义的

标签： javascript html css mouseover

【解决方案1】：

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

以下行应该可以工作：

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

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

【讨论】：

所以，虽然你提到它会返回 2 个项目，但你是说只设置单个元素应该有效？
我只是说，如果有人想为集合中的所有元素设置一个属性，除了为集合中的每个元素设置此属性之外，没有办法做到这一点。

【解决方案2】：

这一行：

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

<div class="service_level effect8" onmouseover="onMouseOver()" onmouseout="onMouseOut()">

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

【讨论】：