Html 未捕获的类型错误：尝试更改给定元素的样式时无法读取未定义的属性“样式”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16251353/
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
Uncaught TypeError: Cannot read property 'style' of undefined while try to change style of given element
提问by Pawe? Nowak
I try to learn javascript and ajax, so I write any script where I want to change style of given element in form. I've trying to do this since 2 days but without any effect - I still have error "Uncaught TypeError: Cannot read property 'style' of undefined". I include my html and js code below. Please tell me what I'm doing wrong:
我尝试学习 javascript 和 ajax，所以我编写了任何脚本，我想在表单中更改给定元素的样式。自 2 天以来我一直在尝试这样做，但没有任何效果 - 我仍然有错误“未捕获的类型错误：无法读取未定义的属性‘样式’”。我在下面包含了我的 html 和 js 代码。请告诉我我做错了什么：
html:
html：
<div id="registerNewUser" class="tabContent">
<h1>Registration form</h1>
<form action='#' name='registerForm' id='registerForm'>
<table style='width: 25%;'>
<tr>
<td>Name:</td><td><input type="text" style="border: 1px solid #000;" id='name' name='name' size ="10" onClick='changeStyle(this.id);' onBlur='checkFieldName();'></td>
<td><div id='divName'></div></td>
</tr>
<tr>
<td>Second Name:</td><td><input type="text" style="border: 1px solid #000;" id='secondName' name='secondName' size="10" onClick='changeStyle(this.id);' onBlur='checkFieldSecondName();'></td>
<td><div id='divSecondName'></div></td>
</tr>
<tr>
<td>Password:<sup style='cursor: help' title="Password must have at least 6 characters">*</sup></td><td><input type="password" style="border: 1px solid #000;" id='password' name='password' size="10" onClick='changeStyle(this.id);' onBlur='checkFieldPassword();'></td>
<td><div id='divPassword'></div></td>
</tr>
<tr>
<td>Retype Password:<sup style=' cursor: help' title="Password must have at least 6 characters">*</sup></td><td><input type="password" style="border: 1px solid #000;" name="retypePassword" id='retypePassword' size="10" onClick='changeStyle(this.id);' onBlur='checkFieldRetypePassword();'></td>
<td><div id='divRetypePassword'></div></td>
</tr>
<tr>
<td>Email:</td><td><input type="text" style="border: 1px solid #000;" id='email' name='email' size="10" onClick='changeStyle(this.id);' onBlur='checkFieldEmail();'></td>
<td><div id='divEmail'></div></td>
</tr>
</table>
</form>
</div>
javascript:
javascript:
var registerForm=document.getElementById('registerForm'); // register form
function changeStyle(element)
{
registerForm.element.style.border='1px solid #fff';
}
Thanks in advance.
提前致谢。
回答by Qantas 94 Heavy
You need to get the element by ID:
您需要通过 ID 获取元素：
document.getElementById(element).style.border = '1px solid #fff';
回答by David says reinstate Monica
To use the passed selector (assuming that you're passing the idas a string):
要使用传递的选择器（假设您id以字符串形式传递）：
document.getElementById(element).style.border = '1px solid #fff';
JS Fiddle demo(in the Fiddle, I'm using a red border to make it more obvious, but the principle is exactly the same).
JS Fiddle 演示（在 Fiddle 中，我使用红色边框使其更明显，但原理完全相同）。
If you're passing the node itselfin the function, however:
但是，如果您在函数中传递节点本身：
element.style.border = '1px solid #fff';
JS Fiddle demo(again, a red border for visual clarity).
JS Fiddle 演示（再次，红色边框以提高视觉清晰度）。
