怎么在JavaScript中更改Div子元素上的文本颜色

本教程将介绍如何在JavaScript中更改Div子元素上的文本颜色的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

怎么在JavaScript中更改Div子元素上的文本颜色 教程 第1张

问题描述

网页的一部分包含如下所示的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元素中的两个。"父"DIV元素可以通过id的值来区分。在本例中,它们是id="0:7"和id="0:5",但在其他情况下,它们可以是"0:1"、"0:2"..."0:20"、"0:21"等。

在JavaScript中,我试图找到特定的"父"DIV元素,然后更改关联的"子"DIV元素(称为"nodeContent")的背景颜色。换句话说,我不想更改所有"nodeContent"DIV元素的背景颜色,而只想更改特定元素的背景颜色。例如,我想将"nodeContent"DIV元素的背景颜色更改为"red",该元素是id="0:5"的"父"DIV元素的"子"元素。

我知道怎么使用以下代码查找"Parent"DIV:

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

但我不知道怎么找到关联的名为"nodeContent"的DIV"子"元素(这样我就可以更改背景颜色)。

推荐答案

在父节点上调用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>

好了关于怎么在JavaScript中更改Div子元素上的文本颜色的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。