如何使所有子元素变为红色

Question

这是html代码：

<div id="sm-responsive-one">
  <p> Step one </p>
  <div  style="">1</div>
  <div  style="">2</div>
  <div  style="">3</div>
  <div  style="">4</div>
</div>

<div id="sm-responsive-two">
  <p> Step two </p>
  <div  style="">5</div>
  <div  style="">6</div>
  <div  style="">7</div>
  <div  style="">8</div>
</div>

问题：我想使用JavaScript而不使用任何循环使1,2,3和4（ sm-responsive-one子元素读取颜色），有可能吗？

这是我正在尝试的代码：

<script>
  document.getElementById("sm-responsive-one").getElementsByTagName("div").style.color="red";

  //document.getElementById("sm-responsive-one").getElementsByTagName("div")[2].style.color="red";
</script>

Answer 1

您需要使用一个循环，因为getElements*返回伪数组。

如果您不想使用文字循环语法，则可以应用Array.prototype.forEach ，但这在内部仍然是循环。

var children = document.getElementById("sm-responsive-one").getElementsByTagName("div");
Array.prototype.forEach.call(children, function (it) {
    it.style.color="red";
});

Answer 2

首先添加以下CSS规则：

.red-children div  {color: red}

然后，javascript是：

document.getElementById('sm-responsive-one').className = "red-children"

Answer 3

getElementsByTagName返回HTML元素集合，因此您需要对其进行迭代：

var elements = document.getElementById("sm-responsive-one").getElementsByTagName("div");

for( var i = 0, len = elements.length; i < len; i++ ) {
    elements[ i ].style.color = 'red';
}

Answer 4

尝试这个：

$("#sm-responsive-one > div").css("color","red");

检查这个小提琴：

http://jsfiddle.net/v6xxws1z/