在javascript中获取子节点

-2

如何通过节点方法更改“sm”内ABCD的颜色。在javascript中获取子节点

HTML

</html> 
<body> 
    <div class="row"> 
    <div class="firstMain"><div class="sm">ABCD</div></div> 
    <div class="secondMain"><div class="sm">XYZ</div></div> 
    </div> 
</body> 
</html>

的Javascript

var mp , sb ; 
mp = document.getElementsByClassName('main')[0]; 
sb = document.getElementsByClassName('sm')[0]; 
if (sb.firstChild === mp ){ 
sb.style.color = "blue"; 
}

我想在不同的格状的 “SM” 颜色改变类 “SM” 的颜色不同（firstMain）将从类 “SM” 不同（secondMain）

来源

2016-11-28 avinash majhi

你的HTML包含一类是'main'的任何元素，或'sm-fw'。如果'sm-fw'表示'sm'，那么这个元素没有子元素，只有一个子元素节点，你不能设置样式。另外，请给你的问题一个更具描述性的标题。 – 2016-11-28 05:27:43

有颜色排列和选择项目在它们之间迭代，并设置颜色。

**如果有很多个SM div的

工作摘录这将是得心应手：

var sms = document.getElementsByClassName("sm"); 
 
var colors = ["red", "blue"]; 
 
for (var i = 0; i < sms.length; i++) { 
 
    sms[i].style.color = colors[i]; 
 
}

<div class="row"> 
 
    <div class="firstMain"> 
 
    <div class="sm">ABCD</div> 
 
    </div> 
 
    <div class="secondMain"> 
 
    <div class="sm">XYZ</div> 
 
    </div> 
 
</div>

来源

2016-11-28 05:24:07

试试这个：

document 
 
    .querySelector('.firstMain') 
 
    .querySelector('.sm').style.color = 'red';

</html> 
 
<div class="row"> 
 
    <div class="firstMain"> 
 
    <div class="sm">ABCD</div> 
 
    </div> 
 
    <div class="secondMain"> 
 
    <div class="sm">XYZ</div> 
 
    </div> 
 

 
</div> 
 
</body> 
 

 
</html>

来源

2016-11-28 05:20:11 Khang

为什么不'querySelector（'。firstMain .sm'）'？ – 2016-11-28 05:30:00

可以使用querySelector有一个更具体的选择不是单一类选择一个元素：

document.querySelector('.firstMain .sm').style.color = 'blue'; 
document.querySelector('.secondMain .sm').style.color = 'red';

来源

2016-11-28 05:20:20 Paulpro

您可以使用querySelector或getElementByClassName。

mp = document.getElementsByClassName('firstMain')[0].getElementsByClassName('sm')[0]; 
sb = document.getElementsByClassName('secondMain')[0].getElementsByClassName('sm')[0]; 

sb.style.color = "blue";

或

document.querySelector('.secondMain .sm').style.color = 'blue';

来源

2016-11-28 05:23:25

在javascript中获取子节点

回答

相关问题