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 here

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;
}

如何改变第一个孩子的财产

2 个答案: