javascript - 如果他们的 child 不同，如何使用javascript分别获取所有父div的高度和宽度

Question

我有名为“main”和“sq”的父div，它们有名为“s”的同名子元素，它们都是使用javascript设计(宽度和高度)，所以我想根据其父级使两个名为“s”的div具有不同的宽度和高度

子 div (class - "s") 的高度和宽度与其父 div 的比例应为 1.5

main 的子级成功获得了 div 的比例，但 sq 却没有。

我在(e.parentNode.clientWidth & e.parentNode.clientHeight)中发现了问题，它只采用main 的宽度和高度不是 sq 的。

简单来说，橙色里面的黑色 div 的比例是 1.5，而绿色的比例不是？

查看此处 - http://www.w3schools.com/code/tryit.asp?filename=FAO5SWY5KETB

HTML

<div class="row">
<div class="main" style="width:400px;height:500px;background-color:orange">
<div class="s" style="background-color:black">xfgx</div>
</div>
<div class="sq" style="width:250px;height:500px;background-color:green;">
<div class="s" style="background-color:black;">xfgx</div>
</div>
</div>

CSS

body{
    margin:0px;
    }
.row {
    clear:both;
    width:100pc;
}
.main,.sq{
    float:left;
    position:relative;
}

JS

var sms = [].slice.call(document.getElementsByClassName("s"), 0);
 sms.forEach(function(e) {
    var w = window.innerWidth - e.parentNode.clientWidth ;
    var h = window.innerHeight - e.parentNode.clientHeight ;
    var MW = w - ( w / 1.5 );
    var MH = h - ( h / 1.5 );
    e.style.width = MW + 'px';
    e.style.height = MH + 'px';
    document.getElementById('d').innerHTML= e.parentNode.clientWidth ;
});

Answer 1

您只需要父宽度，您可以使用 clientWidth 获得该宽度或与 getBoundingClientRect()取决于相对于填充/滚动条的宽度和高度计算方式:

使用getBoundingClientRect():

var sms = [].slice.call(document.getElementsByClassName("s"), 0);
sms.forEach(function(e) {
  var parentRect = e.parentNode.getBoundingClientRect();
  var MW = parentRect.width - (parentRect.width / 1.5);
  var MH = parentRect.height - (parentRect.height / 1.5);
  e.style.width = MW + 'px';
  e.style.height = MH + 'px';
});

body {
  margin: 0px;
}
.row {
  clear: both;
  width: 100pc;
}
.main,
.sq {
  float: left;
  position: relative;
}

<div class="row">
  <div class="main" style="width:400px;height:500px;background-color:orange">
    <div class="s" style="background-color:black">xfgx</div>
  </div>
  <div class="sq" style="width:250px;height:500px;background-color:green;">
    <div class="s" style="background-color:black;">xfgx</div>
  </div>
</div>

使用clientWidth:

var sms = [].slice.call(document.getElementsByClassName("s"), 0);
sms.forEach(function(e) {
  var w = e.parentNode.clientWidth;
  var h = e.parentNode.clientHeight;
  var MW = w - (w / 1.5);
  var MH = h - (h / 1.5);
  e.style.width = MW + 'px';
  e.style.height = MH + 'px';
});

body {
  margin: 0px;
}
.row {
  clear: both;
  width: 100pc;
}
.main,
.sq {
  float: left;
  position: relative;
}

<div class="row">
  <div class="main" style="width:400px;height:500px;background-color:orange">
    <div class="s" style="background-color:black">xfgx</div>
  </div>
  <div class="sq" style="width:250px;height:500px;background-color:green;">
    <div class="s" style="background-color:black;">xfgx</div>
  </div>
</div>