更改父类 onfocus答案

【问题标题】：Change Parent Class onfocus更改父类 onfocus
【发布时间】：2013-03-11 20:12:33
【问题描述】：

我有一个字段，我希望选择其中一个输入框来更改字段的背景颜色。我的尝试是通过一个简单的 onfocus 操作更改输入的父级（即字段）的 html 类，但我没有看到任何反应。

我有以下内容，并仔细检查了类名。

在脚本中：

function changefield()
{
document.getElementById(this.parentNode).className = "temp_field";
}

在html中：

<input class="type1" type="text" size="30" onFocus="changefield()">

这感觉就像我犯了一些相当明显的初学者错误，但我已经让两个人玩了它，但无济于事。

【问题讨论】：

【解决方案1】：

两件事：

在changefield 内部，this 指的是window，它没有parentNode 属性，因此您将undefined 传递给getElementById。
即使它有一个父节点，this.parentNode 也会返回一个 DOM 节点，而 getElementById 需要一个字符串。

一个快速的解决方案是将您要修改的 DOM 元素传递给您的函数：

function changefield(element) {
    element.className = "temp_field";
}

和

onFocus="changefield(this.parentNode)"

即使父节点有一个 ID，如果你已经有一个对 id 的引用（.parentNode），那么搜索该节点是没有意义的。

有关事件处理以及如何绑定事件处理程序的更多信息，请查看the excellent articles at quirksmode.org。

【讨论】：

【解决方案2】：

您将this.parentNode 传递给getElementById()。

getElementId() 需要一个 id 字符串作为参数（不是 DOM 元素）。

【讨论】：