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

Question

我有一个名为“ main ”和“ sq ”的父div，它们有同名的孩子名为“ s ”，它们都是用javascript设计的（宽度和高度），所以我想把两个div命名为“ s ”不同的宽度和根据父母的身高

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

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

我在（ e.parentNode.clientWidth和e.parentNode.clientHeight ）中发现了问题，它只取主要的宽度和高度而不是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和window.innerHeight 。

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

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

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

只是用

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

这应该可以解决您的问题，并根据您的父级宽度和高度进行计算。