Javascript | 未捕获的类型错误：无法设置未定义的属性“颜色”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30232423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript | Uncaught TypeError: Cannot set property 'color' of undefined
提问by Eclipse
I have an div which changes the css of elements inside it when hovered on/off. However I get an error when I mouseover and mouseout, and the color is not changed (the error is in the title of this question)
我有一个 div，它会在悬停开/关时更改其中元素的 css。但是当我鼠标悬停和鼠标移开时出现错误，并且颜色没有改变（错误在这个问题的标题中）
Whats interesting is the first two changes work (changing the image and changing color of id 'ace_title' but the mouseover and mouseout of 'ace_feature' generates the error.
有趣的是前两个更改工作（更改 id 'ace_title' 的图像和颜色，但 'ace_feature' 的 mouseover 和 mouseout 会产生错误。
Below is my code and what I have tried:
以下是我的代码和我尝试过的：
<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>
回答by Alexander Dayan
When you use getElementByIdyou receive a one element, so it works.
When you use getElementsByClassNameyou receive a collection of elements (containing two elements in your case), so it doesn't work.
当您使用时，getElementById您会收到一个 one 元素，因此它可以工作。当您使用时，getElementsByClassName您会收到一组元素（在您的案例中包含两个元素），因此它不起作用。
The following line should work:
以下行应该有效：
getElementsByClassName('ace_features')[0].style.color='black'
but it would be much better to use a normal script blocks instead of inline
但使用普通脚本块而不是内联会好得多
回答by Icepickle
This line:
这一行：
document.getElementsByClassName('ace_features')
returns an array of elements or undefined
返回元素数组或未定义
You should change your mouseover event rather to an external function, so you could iterate all the class names as such
您应该将鼠标悬停事件更改为外部函数，这样您就可以迭代所有类名
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>