どのようにすべての親のdivの高さを取得し、彼らのチャイルズが異なる場合はJavaScript

Question

を使用して個別に幅に私は親の名前のdivを持っている - 「メイン」と「平方」を、彼らは「S」と呼ばれる同じ名前の子を持っています両方はJavaScriptを使用して（幅と高さ）に設計されたので、私は両方が

と親の両方の子のdiv（クラス - 「S」）に従って命名「の」異なる幅と高さをDIVにしたいされています高さと幅は親のdivに1.5の比率であるべきです

メインないの子は比にdiv要素を取得するための成功であるが、平方年代。

と私だけメインの幅と高さではない平方」を取っている（e.parentNode.clientWidth & e.parentNode.clientHeight）で問題を見つけましたs。

単に、オレンジの中の黒い部分は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()のいずれかで取得することができ、親幅が必要になります。

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>

付き

：

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

あなたはJavaScriptが必要ではないようですが、ちょうどCSS機能calc()を使用してください。

.s { 
    width: calc(100%/1.5); 
    height: calc(100%/1.5); 
} 

を、あなたが特にJavaScriptを学習している場合を除き、それは、任意のスクリプトなしで動作します限り、すべての要素がブロックレベルのものであるため、次のように書くことができます。

getBoundingClientRect()付：

body{ 
 
    margin:0px; 
 
    } 
 
.row { 
 
    clear:both; 
 
    width:100pc; 
 
} 
 
.main,.sq{ 
 
    float:left; 
 
    position:relative; 
 
} 
 
.s { 
 
    width: calc(100%/1.5); 
 
    height: calc(100%/1.5); 
 
}

<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 3

あなたは、単に親の幅に対する子どもの幅を計算する必要がある場合は、window.innerWidth & window.innerHeightを含める必要はありません。

window.innerWidthあなたは

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

が、なぜ、以下の行を使用して、親の幅から引いていると言う945pxの一定の値を、持っています？ これはあなたの計算を混乱させます。

ただこれが唯一のあなたの親幅&高さごとに、あなたの問題&計算を修正する必要があり

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

を使用しています。