计算html模板的实际宽/高

Question

我在js中有html模板，比如：

<div style="top: ...; height: .....>....</div>

如何在渲染后找到此div的实际宽度？

我尝试过window.getComputedStyle(myElement)，它找到了元素，但返回：

width: auto
height: null

怎样才能找到真实的高度/宽度？

谢谢。

Answer 1

试试这个：

var w = element.outerWidth; var h = element.outerHeight;

计算包括填充在内的宽度和高度。

您可以使用innerWidth或innerHeight来计算宽度和高度，而无需填充。

Answer 2

标识您的div

<div id="a_div" style="top: ...; height: .....>....</div>

并使用javascript

var height = document.getElementById("a_div").style.height.replace("px","");
var width = document.getElementById("a_div").style.width.replace("px","");

JSFIDDLE