Question

我有名为“ main ”和“ sq ”的父div，他们有同名的孩子名为“ s ”，两者都是使用javascript设计（宽度和高度），所以我想根据父母的

使两个div命名为“ s ”不同的宽度和高度

两个子div（类 - “ s ”）的高度和宽度应与其父div的比率为1.5

主的孩子成功获得div比例，但 sq 不是。

我在（ e.parentNode.clientWidth＆amp; 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>

Answer 2

如果您只是需要根据父母的宽度计算孩子的宽度，那么就不需要包含window.innerWidth＆amp; window.innerHeight。

window.innerWidth的常数值为945px，您可以使用下面的这一行从父亲的宽度中减去

var w = window.innerWidth - e.parentNode.clientWidth;

但为什么？ 这会弄乱你的计算。

只需使用

var w = e.parentNode.clientWidth;
var h = e.parentNode.clientHeight;

这应该可以解决您的问题＆amp;根据您的父母宽度和＆amp;高度。

如果他们的孩子使用javascript不同，如何分别获得所有父div高度和宽度

2 个答案: