获得div高度

时间:2012-05-25 00:58:48

标签: javascript html

Firebug告诉我计算出的my_div样式:

宽度300px

身高453.167px

然而,当我执行console.log(mydiv.style.height)时,它会给我一个空字符串,即使console.log(mydiv)记录了正确的元素。我确信在调用此日志记录代码时页面已加载。我很欣赏不使用jQuery的解决方案。

2 个答案:

答案 0 :(得分:18)

根据所选的浏览器,其中之一可以:

mydiv.offsetHeight
mydiv.clientHeight

Get full height of a clipped DIV

Getting the height of a div

答案 1 :(得分:-4)

更新:

自我的原始答案以来,许多浏览器的不一致性已得到修复。现在,DOM元素的clientHeight属性是可靠的。

var height = element.clientHeight;

  

对于没有CSS或内联布局框的元素,Element.clientHeight只读属性为零,否则它是元素的内部高度(以像素为单位),包括填充,但不包括水平滚动条高度,边框或边距。

     

clientHeight可以计算为CSS高度+ CSS填充 - 水平滚动条的高度(如果存在)。

     

注意:此属性将值舍入为整数。如果需要小数值,请使用element.getBoundingClientRect()。

来源:https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight

原始答案:

如果你使用jQuery JS库,你可以这样做:

var computed_height = $('#my_div').height();

如果使用Prototype JS库,则类似:

var computed_height = $('my_div').getHeight();

使用库通常是最容易的&大多数跨浏览器的方式做某事。使用vanilla js获取计算样式是不可靠的,因为不同浏览器的属性是不同的。