[英]JavaScript change style of a specific child div from another child div
Let's say that we have a loop which result 3 divs with other 4 divs inside each, like this: 假设我们有一个循环,结果是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>
Now, I want to change the style css with javascript. 现在,我想使用javascript更改样式css。 How can I make something like this in javascript and work?
如何在javascript中制作类似的内容并正常工作?
document.getElementsByClassName('one')[2].document.getElementsByClassName('two')[3].style.cssText {...};
I want to change the style css of the class .two
from child [3]
which is inside class .one
from child [2]
我想从
child [3]
更改类.two
的样式CSS,这是在child [2]
类.one
内部.one
You were very close. 你很亲近 A
HTMLElement
has - like document
- a .getElementsByClassName
method to select some of the child elements: HTMLElement
具有类似于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>
MDN: document.getElementsByClassName
and Element.getElementsByClassName
. MDN:
document.getElementsByClassName
和Element.getElementsByClassName
。
I'm not sure if you absolutely want to do this with JS, but just in case, here's a pure CSS approach : 我不确定您是否绝对想用JS做到这一点,但是以防万一,这是一种纯CSS方法:
.one:nth-child(3) .two:nth-child(4){ 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>
( nth-child
is 1-based) (
nth-child
是从1开始的)
You can use below code - 您可以使用以下代码-
var parent = document.getElementsByClassName('one')[2]
parent.getElementsByClassName('two')[3].style.color = "blue";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.