5

我尝试学习 javascript 和 ajax，所以我编写了任何脚本来更改表单中给定元素的样式。我从 2 天开始就尝试这样做，但没有任何效果 - 我仍然有错误“未捕获的类型错误：无法读取未定义的属性‘样式’”。我在下面包含了我的 html 和 js 代码。请告诉我我做错了什么：

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:

var registerForm=document.getElementById('registerForm'); // register form

function changeStyle(element)
{
    registerForm.element.style.border='1px solid #fff';
}

提前致谢。

4

2 回答 2

6

您需要通过 ID 获取元素：

document.getElementById(element).style.border = '1px solid #fff';
于 2013-04-27T11:07:20.490 回答
3

要使用传递的选择器（假设您将 传递id为字符串）：

document.getElementById(element).style.border = '1px solid #fff';

JS Fiddle 演示（在 Fiddle 中，我使用红色边框使其更明显，但原理完全一样）。

但是，如果您在函数中传递节点本身：

element.style.border = '1px solid #fff';

JS Fiddle 演示（再次，为了视觉清晰，红色边框）。

于 2013-04-27T11:08:23.777 回答