I have three div p, p1, p3
which is inside in div r
having different height
I want to set all div inside the div r similar to the first div inside the r
as per their classname using object:
var firstChild = document.querySelector(".r:first-child");
var descendant = firstChild.querySelectorAll(".p, .p2,.p3");
var p, p2, p3;
[].forEach.call(descendant, function(itm) {
itm.style.backgroundColor = "green";
var ch = document.getElementsByClassName("p");
for (var i = 0; i < ch.length; i++) {
var ar = ['p', 'p2', 'p3']; //are the class name
p = ch[i].parentNode.clientHeight / 1.5; // height value for p
p2 = ch[i].parentNode.clientHeight + p; // height value for p2
p3 = p2 / 1.5; // height value for p3
var colors = {}; //using dynamic
colors[ar[0]] = p;
colors[ar[1]] = p2;
colors[ar[2]] = p3;
ch[i].style.height = colors[ch[i].className] + "px"; //problem comes here this shows undefined
itm.style.height = ch[i].clientHeight + "px";
document.getElementById('demo').innerHTML = "asfaf";
}
});
.p,
.p2,
.p3 {
display: inline-block;
width: 80px;
border: 1px solid #999;
}
.p {
height: 50px;
}
p2 {
height: 100px;
}
p3 {
height: 150px;
}
<div>
<div class="r">
<div class="p">fgdsgs</div>
<div class="p2">sdgdfg</div>
<div class="p3">sdgdfg</div>
</div>
</div>
<p id="demo"></p>
as you've seen p, p1, p2
has different value in javascript , i want to make all div in same height
example = if the first div inside r is p the make all div inside r will be according to their value described (ch[i].parentNode.clientHeight / 1.5
) i javascript , similarly if the first div is p3 then all div(p, p2, p3
) inside r will be get same height described in javascript which is p2/1.5
using dynamic propery object , whats the problem in my code ?
:D