javascript - how to change a property of the first child - Stack Overflow

admin管理员组

文章数量:1397110

I am able to change the background-color of this element:

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

But I want to change the color of the first child, which I assumed should work like this:

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

But it does not work. What is wrong? How can I change the style of the firstChild?

PS: I later want to use display=block and none and some other propertys (not just style) for the child. The color was just for testing.

I am able to change the background-color of this element:

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

But I want to change the color of the first child, which I assumed should work like this:

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

But it does not work. What is wrong? How can I change the style of the firstChild?

PS: I later want to use display=block and none and some other propertys (not just style) for the child. The color was just for testing.

• javascript
• css
• parent-child

Share Improve this question Follow edited Feb 25, 2013 at 7:18 erik asked Feb 19, 2013 at 21:00 erikerik 2,46611 gold badge2626 silver badges3030 bronze badges 7

• 3 Please stop using inline CSS/JavaScript. This is not how software is written anymore. – user229044 ♦ Commented Feb 19, 2013 at 21:02
• /agree with @meagar. also, please use a javascript library or framework like jquery – Populus Commented Feb 19, 2013 at 21:04
• 4 @Populus: Why do you remend a JavaScript library? You have no way of knowing if the situation calls for one. – the system Commented Feb 19, 2013 at 21:05
• 2 @thesystem Lol but a Javascript library solves everything! Especially for one tiny problem you have. It's so worth it. All 30-100Kb :) – Ian Commented Feb 19, 2013 at 21:06
• 2 @Populus True, but patibility has nothing to do with this specific problem. It's the understanding of what firstChild holds in this situation. And obviously, there's a fairly simple solution (thanks to the answers) that shouldn't have cross-browser problems...and doesn't require a library. – Ian Commented Feb 19, 2013 at 21:13

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 4

As "the system" mentioned, you are targeting a text node rather than an element node. Try using children[0] instead of firstChild.

jFiddle here

You would need to use .firstElementChild, or you'd need to get rid of the formatting whitespace. That whitespace bees a text node, which is the .firstChild.

The .firstElementChild property isn't supported by some older browsers, so if you're supporting those, you'd need to shim it with a function.

---

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

本文标签： javascripthow to change a property of the first childStack Overflow