Javascript | Uncaught TypeError：无法设置未定义的属性“颜色” [英] Javascript | Uncaught TypeError: Cannot set property 'color' of undefined

问题描述

我有一个div，当它悬停/关闭时，它会改变它内部的元素的CSS。
然而，当我使用鼠标悬停和鼠标移动时，我得到一个错误，并且颜色没有改变（错误在这个问题的标题中）

有趣的是前两个变化工作（改变图像和改变id'ace_title'的颜色，但'ace_feature'的鼠标悬停和鼠标移动会产生错误。

以下是我的代码，我试过的：

 < div class =service_level effect8onmouseover =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.pngid =ace_service> 
< p id = 交流e_title> Ace服务< / p> 
 
< img src =images / icon_tick.pngstyle =float：left; padding：3px 4px 0px 15px;> 
< p class =ace_features> 
卓越IT支持
< / p> 
 
< img src =images / icon_tick.pngstyle =float：left; padding：3px 4px 0px 15px;> 
< p> $ p $; 
< p 
< p $ > 
 
  document.getElementsByClassName（'ace_features'）
  
返回一个元素数组或undefined 
 
 
 
你应该改变你的mouseover事件而不是外部函数，所以你可以迭代所有的类名
 
 
 
 
 
 
  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’ ;}}函数的onmouseout（）{的document.getElementById（ ace_service）SRC =图像/ 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 effect8onmouseover =onMouseOver（）onm​​ouseout =onMouseOut（）> < img src =images / ace.pngid =ace_service> < p id =ace_title> Ace服务< / p> < img src =images / icon_tick.pngstyle =float：left; padding：3px 4px 0px 15px;> < p class =ace_features>杰出的IT支持< / p> < img src =images / icon_tick.pngstyle =float：left; padding：3px 4px 0px 15px;> < p class =ace_features>杰出的IT支持< / p>< / div>  
 
 
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)

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.

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>

解决方案
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>





                        
这篇关于Javascript | Uncaught TypeError：无法设置未定义的属性“颜色”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！