如何在JavaScript中更改Div子元素的文本颜色

How to Change Text Color on a Div Child Element in JavaScript

本文关键字：元素 文本 颜色 Div JavaScript      更新时间：2023-09-26

网页的一个部分有div元素，看起来如下：

<div class="nodePedigree node male " id="0:7" style="height:0.57em; width:2.95em; left:7.076em; top:0.07959999em;" T:NodeId="0:7">
    <div class="nodeContent">
        <div class="vAlignContent">
            <h6 class="nodeTitle">John Doe</h6>
            <div class="nodeInfo">1860-1915</div>
        </div>
    </div>
</div>
<div class="nodePedigree node female " id="0:5" style="height:0.57em; width:2.95em; left:3.814em; top:4.081em;" T:NodeId="0:5">
    <div class="nodeContent">
        <div class="vAlignContent">
            <h6 class="nodeTitle">Jane Doe</h6>
            <div class="nodeInfo">1903-2000</div>
        </div>
    </div>
</div>

正如您所看到的，DIV元素被放置在其他DIV元素中。

这只是网页中许多类似DIV元素中的2个。"parent"DIV元素可以通过id的值来区分。在这种情况下，它们是id="0:7"和id="0:5"，但在其他情况下，它可以是"0:1"、"0:2"。。。"0:20"、"0:21"等

在JavaScript中，我试图找到特定的"父"DIV元素，然后更改关联的"子"DIV元件（称为"nodeContent"）的背景颜色。换句话说，我不想更改所有"nodeContent"DIV元素的背景色，只想更改特定的元素。因此，例如，我想将"nodeContent"DIV元素的背景颜色更改为"红色"，该元素是id为"0:5"的"parent"DIV元件的"child"。

我知道如何使用以下代码找到"父"DIV：

var myDiv = document.getElementById('0:5');

但我不知道如何找到名为"nodeContent"的相关DIV"child"元素（这样我就可以更改背景颜色）。

调用父节点上的getElementsByClassName()，然后使用列表中的第一个节点：

var parent = document.getElementById('0:5');
var nodes = parent.getElementsByClassName('nodeContent');
nodes[0].style.backgroundColor = '#F00';
<div class="nodePedigree node male " id="0:7" style="height:0.57em; width:2.95em; left:7.076em; top:0.07959999em;" T:NodeId="0:7">
    <div class="nodeContent">
        <div class="vAlignContent">
            <h6 class="nodeTitle">John Doe</h6>
            <div class="nodeInfo">1860-1915</div>
        </div>
    </div>
</div>
<div class="nodePedigree node female " id="0:5" style="height:0.57em; width:2.95em; left:3.814em; top:4.081em;" T:NodeId="0:5">
    <div class="nodeContent">
        <div class="vAlignContent">
            <h6 class="nodeTitle">Jane Doe</h6>
            <div class="nodeInfo">1903-2000</div>
        </div>
    </div>
</div>

相关文章：