解决Uncaught TypeError: Cannot set property 'borderColor' of undefined报错

嘿，我帮你定位到问题根源了！你遇到的报错完全是因为调用changeBorder函数时漏传了第一个必要参数——也就是要修改样式的DOM元素。

原函数定义是需要两个参数：element（要改的元素）和to（目标颜色），但你在onmouseover和onmouseout的回调里只传了颜色值，导致函数内部的element变成了undefined，自然就没法访问element.style.borderColor了，这就是报错的核心原因。

解决方案（两种可选） #

方案1：直接传递目标元素

修改事件绑定的代码，把你获取到的contentDiv作为第一个参数传给changeBorder：

function changeBorder(element, to){ 
  element.style.borderColor = to; 
}
var contentDiv = document.getElementById('color');
contentDiv.onmouseover = function(){ 
  changeBorder(contentDiv, 'red'); // 补上element参数
};
contentDiv.onmouseout = function(){ 
  changeBorder(contentDiv, 'black'); // 补上element参数
};

方案2：利用事件回调的this（更灵活）

如果以后需要给多个元素复用这个函数，推荐用this指代当前触发事件的元素，同时简化函数参数：

function changeBorder(to){ 
  this.style.borderColor = to; // this就是触发事件的DOM元素
}
var contentDiv = document.getElementById('color');
// 用bind绑定上下文和参数
contentDiv.onmouseover = changeBorder.bind(contentDiv, 'red');
contentDiv.onmouseout = changeBorder.bind(contentDiv, 'black');

额外的小修正 #

还有两个小细节能让代码更稳定：

1. 你的meta标签content属性写错了，应该改成text/html（不是text/html/js），避免浏览器解析异常：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

2. 最好把脚本放在window.onload回调里（或者放在</body>标签前），确保DOM元素加载完成后再获取，防止出现contentDiv为null的情况。

完整可运行代码 #

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Border Color Toggle</title>
<style>
.box{ border: 1px solid red; background-color:pink; padding: 10px; }
.row { border: 1px solid #000; }
</style>
<script>
function changeBorder(element, to){ 
  element.style.borderColor = to; 
}
// 确保DOM加载完成后执行脚本
window.onload = function() {
  var contentDiv = document.getElementById('color');
  contentDiv.onmouseover = function(){ 
    changeBorder(contentDiv, 'red'); 
  };
  contentDiv.onmouseout = function(){ 
    changeBorder(contentDiv, 'black'); 
  };
}
</script>
</head>
<body>
<div class="row" id="color">
<div class="element">1</div>
</div>
</body>
</html>

这样修改后，鼠标移入id="color"的div时边框会变成红色，移出时变回黑色，也不会再出现报错啦！

内容的提问来源于stack exchange，提问作者Ylama