javascript - 如何更改第一个孩子的属性

Question

我可以更改此元素的背景颜色：

<div onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='red'" style="background-color:green; width:100px; height:40px;">
</div>

但我想改变第一个孩子的颜色，我认为它应该像这样工作：

<div onmouseover="this.firstChild.style.backgroundColor='blue'" onmouseout="this.firstChild.style.backgroundColor='red'" style="background-color:green; width:100px; height:40px;">

  <div style="background-color:white; height:10px; width:10px; margin:20px;">This is the first child, I think.</div>

</div>

但它不起作用。怎么了？如何更改 firstChild 的样式？

PS：我稍后想为孩子使用 display=block 和 none 以及其他一些属性（不仅仅是样式）。颜色只是为了测试。

Answer 1

正如“系统”所提到的，您的目标是文本节点而不是元素节点。尝试使用children[0]而不是firstChild.

jFiddle在这里

Answer 2

您需要使用.firstElementChild，或者您需要摆脱格式化空格。该空白成为文本节点，即.firstChild.

某些较旧的浏览器不支持该.firstElementChild属性，因此如果您支持这些，则需要使用函数对其进行填充。

---

<div onmouseover="changeColor(this, 'blue')" onmouseout="changeColor(this, 'red')" style="background-color:green; width:100px; height:40px;">

  <div style="background-color:white; height:10px; width:10px; margin:20px;">This is the first child, I think.</div>

</div>

---

function changeColor(el, color) {
    firstElemChild(el).style.backgroundColor=color;
}
function firstElemChild(el) {
    if (el.firstElementChild)
        return el.firstElementChild;

    el = el.firstChild

    while (el && el.nodeType !== 1)
        el = el.nextSibling;

    return el;
}