如何用JavaScript測量DOM節點內容區域的維度？

我需要計算DOM節點的寬度和高度，使其不包含填充，邊距和邊框寬度，即;內容區域的寬度和高度。目前，我已經嘗試過clientWidth和clientHeight，但尺寸並不等同於實際的DOM節點。計算內容區域的維度的最佳方法是什麼？如何用JavaScript測量DOM節點內容區域的維度？

來源

2013-08-28 asim-ishaq

我不知道你不是要求'scrollWidth' /'scrollHeight'在這裏。 – raina77ow

從什麼@jordan說，以消除填充左，右填充從clientWidth會給內容區域的實際大小的角度計算點。但問題是，如果樣式是通過外部樣式表設置的，則無法通過elem.style.paddingLeft和elem.style.paddingRight獲得左右填充的值。

下面是閱讀外部樣式表後獲得通過節點瀏覽器應用的填充實際值的方式：

var node = document.getElementById("nodeid"); 

alert("Padding Left before computed style: " + node.style.paddingLeft); 

var st = window.getComputedStyle(node); 

alert("Padding Left after computed style: " + st.paddingLeft);

注：如果您使用風格屬性，那麼elem.style.paddingLeft有節點風格將否則工作不行！

來源

2013-09-05 09:26:26

clientWidth和clientHeight是最好的方法來做到這一點，但你需要減去填充。

所以要獲得寬度，你可以做elem.clientWidth - elem.paddingLeft - elem.paddingRight。

下面是關於確定尺寸略有文檔：https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements

來源

2013-08-28 19:05:46 Jordan

有一個問題，使用樣式表設置填充，邊距和邊框，當我嘗試通過javascript獲取寬度時，它會返回空白。例如，node.style.paddingLeft返回「」我已經在chrome dev工具中檢查了節點paddingLeft，並且顯示了3px。我如何從JavaScript獲得這個3px？ –

你什麼時候檢查寬度？您可能需要等到onload函數被調用後，纔會呈現整個頁面。 – Jordan

是的，我正在dom加載完成後檢查它。在控制檯中驗證相同。當我輸入node.style.paddingLeft時，它返回「」。在你的答案中，我可以看到在elem中沒有像paddingLeft這樣的屬性，它應該在elem.style.paddingLeft –

如何用JavaScript測量DOM節點內容區域的維度？

回答

相關問題