獲取在屏幕上繪製的元素寬度？

Question

我正在處理響應式設計，並試圖在頁面寬度爲1500px時查找元素的寬度。 div中有填充，所以當我右鍵單擊並檢查元素時輸出的寬度不正確。

我試圖打開控制檯，這樣做：

var aDiv = document.getElementById('header'); 
console.log(aDiv.style.width); 

這：

var aDiv = document.getElementById('header'); 
getComputedStyle(aDiv); 

但既不工作。如何獲取div在屏幕上的寬度（包括填充）？這甚至有可能嗎？

Answer 1

的確有可能。

使用jQuery -

$("elementnamehere").width(); 

如果你想改變元素的寬度 -

$("elementnamehere").width(80); 

改變 「80」 到任何寬度你想要的。

記住函數計算的寬度是px。

乾杯！

Answer 2

clientWidth是以像素爲單位的元素的內部寬度。它包括填充，但不包括垂直滾動條（如果存在，如果呈現），邊框或邊距。

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