CODEWITHSUNDEEP
javascripthtmlcss
Anjali
Anjali

Reputation: 329

All div inside row should be same height of the firstchild of row

var tg = document.getElementsByClassName('row')[0];
for (var c = 0; c < ts.length; i++) var ch = document.getElementsByClassName('o,s,t');
for (var i = 0; i < ch.length; i++) {
  var mh = t g[c].firstChild.clientHeight;
  ch[i].style.height = m h + "px";
  if (tg[c].parentNode.tagName === "BODY") {
    ch[i].style.height = "auto";
    document.getElementById('demo').innerHTML = t g;
  }
}
}
.o {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  background-color: orange;
  display: inline-block;
}
.o,
.s,
.t {
  width: 100px;
  background-color: blue;
  display: inline-block;
}
<div class="row">
  <div class="o">vzxvxzv</div>
  <div class="s">sdfs</div class="t">sdf
  <div></div>
</div>
<div class="o"></div>
<p id="demo"></p>

I want to change all div inside row be similar to the height of firstchild of row also if the classes are outside of row the div height will be auto .what's the problem in my code can anyone explain also I dont want to change it from css.

the class s and t should be same height to o.

Upvotes: 1

Views: 68

Answers (2)

Denis Sheremet
Denis Sheremet

Reputation: 2583

document.getElementsByClassName won't work this way. Documentation.

You can use document.querySelectorAll('.o,.s,.t') insteaad.

Upvotes: 2

BNilsou
BNilsou

Reputation: 895

You can use this trick :

var row = document.getElementsByClassName('row')[0];
var insideRow = row.childNodes;
for(var i = 1; i < insideRow.length; i++) {
  insideRow[i].style.height = insideRow[0].style.height; // set height of element 1..n of DIV 'row' to height of element 0 of DIV 'row'
}

Upvotes: 2

Related Questions