Question

如何通过节点方法更改“sm”内的ABCD颜色。

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";
}

我想在不同的div中更改类“sm”的颜色，例如“sm”的颜色（firstMain）将不同于“sm”类（secondMain）

Answer 1

试试这个：

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>

Answer 2

您可以使用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';

Answer 3

让颜色数组和选择项迭代它们并设置颜色。

**如果sm div很多，那么这将非常方便

工作片段：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您可以使用querySelector选择具有比单个类更具体的选择器的元素：

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

在javascript中获取子节点

4 个答案: