Question

我有一个html标签，里面有一些子循环。

<div class="class1 " id="id1" style="position: absolute; z-index: 12005; v left: -10000px; top: -10000px; width: 228px; height: 0px; font-size: 11px;">
    <div class="class2" id="id2" style="width: 228px;">
        <div class="class3">H1</div>
        <div class="class3">H2</div>
        <div class="class3">H3</div>
        <div class="class3">H4</div>
    </div>
</div>

我想将高度设置为class1, class2,...之类的所有子div 我想在这里使用的是

var myDiv2 = document.getElementByID('id2')
myDiv2 = childNodes.forEach({

})

Answer 1

如果你想设置id 'id2'节点内每个div的高度，你应该使用这个代码为每个孩子设置 100px 的高度节点：

childList = document.getElementById('id2').childNodes
childList.forEach(function(item){
    item.style.heigth="100px"
});

请注意，childList表示id为'id2'的节点内所有节点的NodeList。变量项代表Node本身

Answer 2

尝试document.querySelectAll。

＆＃13;

setTimeout(myFunction, 1000);

function myFunction() {
  var x = document.querySelectorAll("#id2 > [class^='class']");
  x.forEach(function(elem) {
    elem.style.height = "30px"
  });
}

＆＃13;

/** css for testing **/

div {
  border: 1px solid red;
  color: red;
  padding: 4px;
  margin: 4px;
  width: 100%;
}

＆＃13;

<div class="class1 " id="id1" style="width: 228px; height: 0px; font-size: 11px;">
  <div class="class2" id="id2" style="width: 228px;">
    <div class="class3">H1</div>
    <div class="class3">H2</div>
    <div class="class3">H3</div>
    <div class="class3">H4</div>
  </div>
</div>

＆＃13;

其他解决方案将使用旧的javascript

＆＃13;

function setElementHeightWhereClassMatching(elem, className, height) {
  if (elem.children.length > 0) {
    var childList = elem.children,
      i;
    for (i = 0; i < childList.length; i = i + 1) {
      if (className.test(childList[i].getAttribute("class"))) {
        childList[i].style.height = height;
        if (childList[i].children.length > 0) {
          setElementHeightWhereClassMatching(childList[i], className, height)
        }
      }
    }
  }
}

function myFunction() {
  var parent = document.getElementById('id1');
  setElementHeightWhereClassMatching(parent, new RegExp('class[\\d]+'), '40px');
  console.log('all class inside id1 changed to 40px height');
}

setTimeout(myFunction, 1000);

function my2Function() {
  var parent = document.getElementById('id2');
  setElementHeightWhereClassMatching(parent, new RegExp('class[\\d]+'), '15px');
  console.log('all class inside id2 changed to 10px height');
}

setTimeout(my2Function, 3000);

＆＃13;

div#id1,
div#id1 div {
  border: 1px solid red;
  color: red;
  padding: 4px;
  margin: 4px;
  display: inline-block;
  width: 100%;
}

＆＃13;

<div class="class1 " id="id1" style="width: 228px; height: 0px; font-size: 11px;">
  <div class="class2" id="id2" style="width: 228px;">
    <div class="class3">H1</div>
    <div class="class3">H2</div>
    <div class="class3">H3</div>
    <div class="class3">H4</div>
  </div>
</div>

＆＃13;

Answer 3

如果你想设置所有孩子的div的高度，你可以使用css。

.class2 .class3{height:100px;}

或者如果你想使用javascript，那么你可以使用

var parentDiv = document.getElementById("id2");
var children = parentDiv.children;
for(var i = 0; i < child.length; i++){
 child[i].style.color = "green";
}

如何在循环中为所有childNodes分配特定属性

3 个答案: