使用Javascript獲取寬度

我是個漂亮的菜鳥，所以要溫柔。我在這裏和互聯網上的其他地方探索過，無法弄清楚這一點。使用Javascript獲取寬度

我想確定div的寬度。
我想這是百分比。
我不想使用JQuery（試圖學習Javascript儘可能多的）
我很失敗。爲什麼「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>

來源

2016-03-26 dmperkins74

寬度由真實的CSS規則設置lating的%不能從元素的「風格」的對象。相反，你必須使用['getComputedStyle（）']（https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle）。 – Pointy

您可以使用getBoundingClientRect（）來代替'getComputedStyle'。寬度' –

你是否嘗試過從下面的任何東西？他們都工作 – JordanHendrix

這裏需要使用element.offsetWidth

獲得的百分比將是不相關的 - 它總是將是50％當前的視口，你在。

這可能不是這種情況，如果你有一個包裝股利或其他EL在頁面上可能會限制div的寬度，但使用當前的代碼就是這種情況。

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>

來源

2016-03-26 14:20:13 JordanHendrix

-1

最準確的方法來獲取元素的大小（甚至位置）是使用

Element.getBoundingClientRect()

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

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）寬度和計算方式相同的方式來計算百分比使用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>

來源

2016-03-26 14:24:00

使用Javascript獲取寬度

回答

相關問題