Javascript ile Genişlik Alın Get

Question

Burada oldukça tatlıyım, nazik olun. İnternette ve başka yerlerde dolaştım ve bunu anlayamıyorum.

1. Bir div genişliğini belirlemeye çalışıyorum.
2. Bunun yüzdesinde olmasını isterim.
3. JQuery'yi (JavaScript'i mümkün olduğunca öğrenmeye çalışarak) kullanmak istemiyorum. (
4. Rahatsız edemiyorum. Neden "TheWidth" (aşağıda) bir şey vermiyor?

Herhangi bir yardım için teşekkür ederiz. Teşekkürler, 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

Bir yüzdesi alakasız olacak alınıyor burada

element.offsetWidth kullanmak gerekir - onun daima% 50 olacak Bulunduğunuz geçerli görünüm.

Bu tür bir kaydırma div veya başka bir eliniz varsa durum böyle olmayabilir Sayfadaki boşlukları, div genişliğini sınırlandırabilir, ancak geçerli kodunuz bu durumda.

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

bir eleman boyutu (ve hatta konum) elde etmek için en doğru yol

Element.getBoundingClientRect() 

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

kullanmaktır 0

window.getComputedStyle(element[, pseudoElt]) 

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

veya

https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth (getBoundingClientRect benzer, sadece bir tam sayı döner) (toplam kaydırılabilir genişliği alanı alır (yani eleman) taşma sahip olduğunda)

Yüzdesini, öğenin üst öğesi (GBCR) genişlik ve hesapla aynı şekilde alarak hesaplayabilirsiniz. CSS kuralları tarafından ayarlanır 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>