Javascriptで幅を取得

Question

私はここでかなり新人ですので、優しくしてください。私はここやインターネット上の他の場所を突き刺してこれを理解することはできません。

1. divの幅を決定しようとしています。
2. 私はパーセンテージであることを望みます。
3. 私はJQueryを使用したくありません（ のようにJavascriptを覚えようとしています）
4. 私は悲惨に失敗しています。なぜ "theWidth"（以下）が何も得られないのでしょうか？

助けてください。おかげで、DP

HTML

theWidth = document.getElementById("titleBG").style.width; 
 
document.getElementById("titleBG").innerHTML = "Width = " + theWidth;

#titleBG{ 
 
    width:50%; 
 
    height:50px; 
 
    \t background-color:#ffcc33; 
 
}

<div id="titleBG"> 
 
</div>

Answer 1

あなたがパーセンテージは無関係であることを行っているの取得ここで

をelement.offsetWidthを使用する必要がある - は、いつもの50％になるだろう現在表示されているビューポート

ラッピングdivまたはその他のelがある場合はそうではないかもしれませんあなたの現在のコードでは、divの幅を制限するかもしれないページ上のements。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth

theWidth = document.getElementById("titleBG").offsetWidth; 
 
document.getElementById("titleBG").innerHTML = "Width = " + theWidth;

#titleBG{ 
 
    width:50%; 
 
    height:50px; 
 
    \t background-color:#ffcc33; 
 
}

<div id="titleBG"> 
 
</div>

Answer 2

素子サイズ（及び偶数位置）を取得するための最も正確な方法は

Element.getBoundingClientRect() 

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
又は

を使用することです0

window.getComputedStyle(element[, pseudoElt]) 

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

又は

https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth（getBoundingClientRectと同様、それだけ整数を返す）
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth（総スクロール幅の領域（すなわち、を取得：要素がオーバーフローを有する場合））

要素の親（GBCR）の幅と計算方法と同じ方法でパーセントを計算することはできませんCSSルールで設定されていますNumber((100/(parentWidth/width)).toFixed(3))

var title = document.getElementById("titleBG"); 
 
var width = title.getBoundingClientRect().width; 
 
var pwidth = title.parentNode.getBoundingClientRect().width; 
 

 
title.innerHTML = "Computed Width= "+ window.getComputedStyle(title, null).width +"<br>"+ 
 
    " GBCRWidth= " + width +"<br>"+ 
 
    " Perc= "+ Number((100/(pwidth/width)).toFixed(3)) +"%";

#titleBG{ 
 
    width:50%; 
 
    height:50px; 
 
    background-color:#ffcc33; 
 
}

<div id="titleBG"></div>