Question

让我们说我们有一个循环，结果3 div与每个内部的其他4个div，如下所示：

<div class="one">
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
</div>

<div class="one">
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
</div>

<div class="one">
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
</div>

现在，我想用javascript更改样式css。我怎样才能在javascript中创建这样的东西并工作？

document.getElementsByClassName('one')[2].document.getElementsByClassName('two')[3].style.cssText {...};

我想要从.two <{1}} child [3]内.one更改类child [2]的样式css

Answer 1

你非常接近。 document有.getElementsByClassName - document.getElementsByClassName('one')[2].getElementsByClassName('two')[3].style.cssText = 'background-color: red';方法来选择一些子元素：

<div class="one">
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
</div>

<div class="one">
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
</div>

<div class="one">
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
</div>

{{1}}

MDN：document.getElementsByClassName和Element.getElementsByClassName。

Answer 2

我不确定你是否绝对想用JS做这件事，但为了以防万一，这里是一个纯粹的CSS方法：

＆＃13;

.one:nth-child(3) .two:nth-child(4){
  background-color : red;
}

＆＃13;

<div class="one">
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
</div>

<div class="one">
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
</div>

<div class="one">
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
   <div class="two">second class</div>
</div>

＆＃13;

（nth-child从1开始）

Answer 3

您可以使用以下代码 -

var parent = document.getElementsByClassName('one')[2]
parent.getElementsByClassName('two')[3].style.color = "blue";

JavaScript更改来自另一个子div的特定子div的样式

3 个答案: