Question

无法设置未定义的属性“borderColor”

2018-01-09

5164

javascript html

我从一本书中复制了这个（..所以它“应该”可以工作），我无法使该函数工作，它可能是重复的，但我搜索了答案但无法使其工作。

"Uncaught TypeError: Cannot set property 'borderColor' of undefined"

它可能很简单，但我相信 to 是问题所在，我尝试将其设置为数组和对象，但我真的不明白，任何带有简单解释的解决方案都将不胜感激。

function changeBorder(element, to){
    element.style.borderColor = to;
}
    
var contentDiv = document.getElementById('color');

contentDiv.onmouseover = function(){
    changeBorder('red');
};
    
contentDiv.onmouseout = function(){
    changeBorder('black');
};

.box{
  border: 1px solid red;
  background-color:pink;
  padding: 10px;
}
    
.row {
    border: 1px solid #000;
}

<html>
<head>
<meta http-equiv="Content-Type" content="text/html/js; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>

<div class="row" id="color">
  <div class="element">1</div>
</div>

</body>     
</html>

我只想删除错误消息并让函数执行某些操作。

Answer 1

您需要设置 this 并像这样更改您的函数：

contentDiv.onmouseover = function(){
    changeBorder(this, 'red');
};

contentDiv.onmouseout = function(){
    changeBorder(this, 'black');
};

如果没有关键字 this ，则无法找到它。请记住，在您的函数中您正在共享元素：

function changeBorder(element, to){
    element.style.borderColor = to;
}

Answer 2

您的 changeBorder 方法需要 2 个参数，但您始终只使用一个参数来调用它。

尝试此操作：

changeBorder(contentDiv, '[color]');

此外，如果在 DOM 准备好之前执行

var contentDiv = document.getElementById('color');

语句，此操作可能不起作用。

Answer 3

changeborder（'red'） - ＆gt;该方法内的VAR元素是用字符串（“红色”）设置的。字符串没有样式属性，因此元素。风格不确定，您不能使用未定义对象的属性（例如BorderColor）