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>

问题：我想制作1,2,3和4（sm-responsive-one的子元素使用JavaScript读取颜色而不使用任何循环。是否可能？

这是我正在尝试的代码：

<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/

如何使所有子元素变红

4 个答案: